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

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

你可以用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 2

---

编辑 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 3

您能否提供更多信息，例如为什么您不知道内容有多大？似乎您希望 CSS 根据您正在加载的内容动态更改格式。我不认为这是 CSS 的目的。 Javascript 将是直接的，可能是最简单的，但您可以使用 PHP 之类的东西在服务器端进行。

如果您向我们提供更多关于实现此功能的环境的信息，我们将能够就可用于实现此功能的方法提供更具体的建议。