div在另一个div里垂直居中的示例介绍

基础知识：div在另一个div里 垂直居中

方法一：

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

方法二：

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

方法三：

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

方法四：

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

更多div在另一个div里垂直居中的示例介绍相关文章请关注PHP中文网！