CSS实现上下垂直居中的几种方法

2019-06-15

第一种方法:绝对位置法

这种情况适用与对需要居中的容器已知他的高度具体值

比如:

<div class=div1>
 <div class=div2></div>
</div>

<style>
 .div1{ position:relative}
.div2{ position:absolute; height:200px; /*假设容器高200px*/  top:50%; margin-top:-100px /*-100px为容器高度一半的负数*/;}
</style>



第二种:flex布局法

这种情况适用于html5布局,但不适用与ie浏览器,因为不兼容,

比如:

<div class=div1>
 <div class=div2></div>
</div>

<style>
 .div1{ height:500px; display:flex}
 .div2{ align-items:center;/*居中对齐/*}
</style>



第三种:模拟table法

这种方法兼容性好,可以不确定高度,但父级元素必须定义高度,这种方法适用于任何情况包含响应式网页

比如:

<div class=div1>
 <div class=div2></div>
</div>

<style>
 .div1{ height:500px; display:table-cell}
 .div2{  vertical-align:middle; display:table;}
</style>


以上三种方法都可以对div进行垂直居中,分别适用与各种情况下的条件。