垂直和水平居中容器以及容器中的内容 [英] Vertically and horizontally centering container and content in container

问题描述

我试图将容器垂直和水平居中放置，并且内部内容使用CSS。

I am trying to vertically and horizontally center a container, and the content inside using CSS.

标记看起来像这样：

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

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

I need the end result to look like this:

到目前为止，我的CSS看起来像这样：

So far, my css looks like this:

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

}

这很好，如果我在 #content ，我可以很容易地看到它确实水平和垂直居中。

That works fine and if I add a border to #content, I can easily see that it is indeed centered horizontally and vertically.

我面临的问题是我不知道 #content 中内容的大小。我需要能够将这些元素水平和垂直对齐2张图片和1张表格。我已经检出此站点进行垂直居中，但是问题是我不知道我内容的大小，而且内容不只是文本。

The problem I am facing is that I do not know the size of the content inside #content. I need to be able to align those elements 2 images and 1 form horizontally and vertically. I have checked out this site for vertically centering, but the problem is that I do not know the size of my content, and the content is not only text.

什么是支持旧版浏览器（IE7及更高版本）的最佳方法？ ？

What is the best way to do this with support for older browsers (IE7 and up)?

推荐答案

---

edit 1

这是陪审团的最终结果

这也将垂直放置在框内的内容（图像，垂直标尺，表格）

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

我正在尝试给出一个权威的答案。
也许这不适用于移动浏览（智能手机，iPad等）。有人可以检查吗？

I'm trying to give an authoritative answer to this. Maybe this won't work in mobile browsing (smart phones, iPad etc.). Could anyone check?

使用 display：table 和 display：table-cell 可以使用与之配合使用的 vertical-align 。

Use display: table and display: table-cell in modern browsers which support them to make use of the vertical-align which works with them.

在某些旧版IE浏览器中使用相对位置定位

Use positioning with relative measures in some old IE browsers

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;
}

这篇关于垂直和水平居中容器以及容器中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！