垂直和水平居中对齐 div答案

【问题标题】：Center align divs vertically and horizontally垂直和水平居中对齐 div
【发布时间】：2012-06-19 05:41:04
【问题描述】：

我有以下代码

<div id="main">
    <div id="one"> </div>
    <div id="two"> </div>
    <div id="three"> </div>
    <div id="four"> </div>
</div>

我需要将中间的 4 个 div 对齐如下，每边保持相等的空间（顶部空间 = 底部空间，右侧空间 = 左侧空间）：

______________________________________
|                                    |
|         ________  ________         |
|        |        ||        |        |
|        |  one   ||   two  |        |
|        |        ||        |        |
|        |________||________|        |
|         ________  ________         |
|        |        ||        |        |
|        | three  ||  four  |        |
|        |        ||        |        |
|        |________||________|        |
|                                    |
|____________________________________|

四个 div 等距，请任何人都可以在这里帮我解决任何 css sn-p 问题吗？我也确实看到了很多关于这个的问题，但无法解决这个问题。有人可以指出任何有用的链接来完美地解释与 div 对齐相关的所有概念吗？

（伙计们，我知道这将是重复的，但请帮忙，因为我只是通过谷歌搜索来回走动。）

提前致谢:)

【问题讨论】：

标签： css html alignment

【解决方案1】：

这是适用于所有现代浏览器（包括 IE8）的一种方式：jsFiddle example。

HTML

<div id="main">
    <div id="one"></div>
    <div id="two"></div><br />
    <div id="three"></div>
    <div id="four"></div>
</div>

CSS

div {
    border:1px solid #999;
}
#main {
    width:400px;
    height:400px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
#one,#two,#three,#four{
    width:100px;
    height:100px;   
    display:inline-block;    
}

请注意，我确实必须在您的代码中添加一个中断标记 (<br />)。

【讨论】：

这不会在我测试过的任何浏览器中显示中心：Safari、Chrome、FireFox 或 iPhone。它与左上角对齐。 @mtk，这不是你的解决方案
@j08691 IE8 算不算现代浏览器？

【解决方案2】：

@j08691 有一个很好的例子。但如果有用的话，这里是我的……

<html>
<body>

<div style="width: 960px; margin: 0 auto;">

    <div>
        <div style="width: 480px; float: left;">
            <div style="padding: 10px; border: 1px solid #F00;">
                1
            </div>
        </div>
        <div style="width: 480px; float: left;">
            <div style="padding: 10px; border: 1px solid #F00;">
                2
            </div>
        </div>
    </div>

    <div>
        <div style="width: 480px; float: left;">
            <div style="padding: 10px; border: 1px solid #F00;">
                3
            </div>
        </div>
        <div style="width: 480px; float: left;">
            <div style="padding: 10px; border: 1px solid #F00;">
                4
            </div>
        <div>
    </div>

</div>

</body>
</html>

【讨论】：

【解决方案3】：

水平居中是很容易的部分，但是有一个巧妙的技巧可以使用绝对定位和负边距使事物垂直对齐。 Here's a working example I wrote a few years back.

下面是一些代码和解释：

<div id="main">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>    
</div>

CSS

#main {
    position: absolute;
    top: 50%;  /* gets the first pixel in the center of the browser */  
    left: 50%;
    height: 860px;
    width: 860px;
    margin-top: -430px; /* negative margin half the height of the div to make it appear center */  
    margin-left: -430px;
    border: solid 1px #000;
    overflow: visible; /* allows an absolutely positioned element to contain floats */ 
    }
#one, #two, #three, #four { 
    float: left;
    height: 400px; 
    width: 400px;
    background-color: blue;
    margin: 20px; 
    }
#one, #three { 
     margin-right: 0; 
     }
#one, #two {  
    margin-top: 20px;  
    margin-bottom: 0;  
    }

【讨论】：

【解决方案4】：

我的答案略有不同（但@j08691 有一个很好的解决方案），

#main{
    position:absolute;
    top:50%;
    left:50%;

    width:100px;
    height:100px;
    margin:auto;
}

#one, #two, #three, four{
    float:left;
    width:50px;
    height:50px;
}

我测试过的完整工作代码是，

    <html>
<head>

<style media="screen" type="text/css">

#main{
    position:absolute;
    top:50%;
    left:50%;

    width:100px;
    height:100px;
    margin:auto;
}

#one, #two, #three, four{
    float:left;
    width:50px;
    height:50px;
}

.box{
    float:left;
    width:50px;
    height:50px;
}


#one{
    background-color:#f00;
}
#two{
    background-color:#0f0;
}
#three{
    background-color:#00f;
}
#four{
    background-color:#000;
}


</style>
</head>
<body>
<div id="main">
    <div id="one" class="box"> </div>
    <div id="two" class="box"> </div>
    <div id="three" class="box"> </div>
    <div id="four"class="box" > </div>
</div>
</body>
</html>

【讨论】：