的HTML

Question

我正在尝试使用CSS垂直和水平居中容器，内部内容。

标记看起来像这样：

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

我需要最终结果如下： result

到目前为止，我的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之类的东西在服务器端做它。

如果您向我们提供有关实施此环境的更多信息，我们将能够提供更具体的建议，说明可以采用哪些方法来实现此目标。

将容器和内容垂直和水平对中在容器中

3 个答案:

的HTML

的CSS