垂直和水平居中的容器和容器中的内容

Question

我试图垂直和水平居中一个容器，里面的内容使用CSS。

标记如下所示：

<div id="container">
  <img src="..someimage.jpg">
  <img src="..someverticaldivider">
  <form action="action.php">
    <input type="text">
    .... (other inputs)
  </form>
</div>

我需要最终结果看起来像这样：

​

到目前为止，我的css如下所示：

#content{
     position:absolute;
     width: 900px; 
     left:50%;
     top:50%;
     height:300px;
     margin-top:-150px;
     margin-left: -450px; 

}

这很好用，如果我给#content添加一个边框，我可以很容易地看到它确实是水平和垂直居中的。

我面临的问题是，我不知道#content中内容的大小。我需要能够对齐这些元素2图像和1形式的水平和垂直。我已经签出了垂直居中的this site，但问题是我不知道我的内容的大小，并且内容不仅仅是文本。

要做到这一点，最好的方法是支持较旧的浏览器(IE7及更高版本)？

Answer 1

编辑1

这是陪审团的最终结果

这也会使框中的内容垂直居中(图像、垂直标尺、窗体)

http://jsfiddle.net/HerrSerker/TuPvF/13/

我试图对此给出一个权威的答案。也许这在移动浏览(智能手机、iPad等)中不起作用。有人能检查一下吗？

在支持它们的现代浏览器中使用display: table和display: table-cell，以利用与它们一起工作的vertical-align。

在一些旧的IE浏览器中使用带相对测量的定位

http://jsfiddle.net/HerrSerker/TuPvF/

<!-- HTML -->
<div class="table">
    <div class="cell">
        <div class="inner">
            <div class="align">
                <img src="//lorempixel.com/200/300">
            </div>
            <div class="align">
                <img src="//lorempixel.com/200/200">
            </div>
        </div>
    </div>
</div>

/* all css rules prepended by a hash sign (#) are specifically for IE 7 and below */

html, body {
     /* w3c dropped height percentage in some css2 or so version 
      * if you don't know the heights of ALL the parent element up to the root.
      * So give ALL parents a known height
      * CAVE: If mobile browsing is important check, if this does not affect scrolling and zooming
      */
    height: 100%; 
}
.table{
    /* modern browsers support display: table
     * use this for an easy vertical alignment
     */
    height: 100%;
    width: 100%;
    display: table;
    /* check if you want absolute positioning */
    position: absolute;
    /* if you don't want absolute positioning, uncomment the next line and comment the previous line out */
    /* #position: relative */ 
}
.table > .cell {
     /* modern browsers support display: table-cell
     * use this for an easy vertical alignment
     * You don't need table-row
     */     
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    /* this is again for lte IE7 */
    #position: absolute;
    /* 50% is half of the containing element (.table here) */
    #top: 50%;
    #width: 100%;
}
.cell > .inner {
    text-align: left;
    display: inline-block;
    /* triggers hasLayout in IE 6+7 */    
    #zoom: 1;
    /* if IE 6+7 element have hasLayout, display: inline behaves as display: inline-block. Strange, huh?  */
    #display: inline;
    #position: relative;
    /* here the 50% are the half of the .cell element */
    #top: -50%;
}
.cell > .inner > .align {
    vertical-align: middle;
    display: inline-block;
    #zoom: 1;
    #display: inline;
}


.inner {
    border: 1px solid gold;
    padding: 10px;
    white-space: nowrap;
}

Answer 2

您可以使用display:table-cell来完成此操作

fiddle

html

<div id="a">
    <div id="b">hello<br/>world</div>
</div>

css

#a {
    display: table;
    width: 100%;
    height: 100%;
}

#b {
    text-align:center;
    vertical-align: middle;
    display: table-cell;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

Answer 3

你能提供更多的信息吗，比如为什么你不知道内容有多大？看起来你想让CSS根据你加载的内容动态地改变格式。我不认为CSS是为了做这件事。Javascript很简单，而且可能是最简单的，但是您可以在服务器端使用PHP之类的东西来完成这项工作。

如果你给我们提供更多关于实现这一点的上下文的信息，我们将能够提供更具体的建议，关于可以使用什么方法来实现这一点。