Question

css DIV容器 垂直居中

<div id="mid">
</div>

#mid { background:red;
width:300px;
height:300px;
}

怎么样让mid在网页的垂直水平居中显示？

Answer 1

垂直居中有一下四种方式：

方法1：

.parent {
          width:800px;
          height:500px;
          border:2px solid #000;
          position:relative;
}
 .child {
            width:200px;
            height:200px;
            margin: auto;  
            position: absolute;  
            top: 0; left: 0; bottom: 0; right: 0; 
            background-color: red;
}

方法2：

.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            display:table-cell;
            vertical-align:middle;
            text-align: center;
        }
        .child {
            width:200px;
            height:200px;
            display:inline-block;
            background-color: red;
        }

方法3：

.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .child {
            width:200px;
            height:200px;
            background-color: red;
        }

方法4：

.parent {            
width:800px;            
height:500px;            
border:2px solid #000;            
position:relative;        
}        
.child {
            width:300px;
             height:200px;            
             margin:auto;            
             position:absolute;/*设定水平和垂直偏移父元素的50%，再根据实际长度将子元素上左挪回一半大小*/            
             left:50%;            
             top:50%;            
             margin-left: -150px;            
             margin-top:-100px;            
             background-color: red;
}

Answer 2

vertical-align:middle;教程讲的是这个可以垂直居中。但是我用这个从来没看出有居中的效果，所有如果是一排文字我用line-height:30px;如果是一个盒子，比如说你这种，我就用margin-top:20px;通过边距去调整到居中位置，或者padding-top:20px;补白也可以。。。就看你怎么用了！！希望对你有帮助！

Answer 3

<style>
#mid{
position:absolute;
width:300px;
height:300px;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-150px;
border:1px solid red;
}
</style>
<div id="mid"></div>

这里DIV的高度和宽度都是300px; 设置position:absolute; 是让DIV绝对定位，要想让DIV在窗口的正中间，必须让DIV的中心与窗口的中心重合，所以这里面top:50%; 和left:50%;是让DIV的左上角先位于窗口的中心位置，然后通过margin-left和margin-top分别取宽和高的一半，让DIV的中心位于窗口的中心...
希望能帮助你...

Answer 4

可以定义一个网页大的div margin;0 auto;
line-height 定义和height 的高度一样 就可以了 （很常用的技巧

如不明白 QQ78 520 22

Answer 5

<style>
#mid{
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
width:300px;
height:300px;
border:1px solid red;
}

</style>
<div id=mid></div>

注意，其中margin:-150px 0 0 -150px;
第一个150是高度的一半，第四个150是宽度的一半