Div垂直居中

1. Div垂直居中
   1. Flex 布局

不考虑兼容老式浏览器的话，用Flex布局简单直观一劳永逸：

parentElement{

    display:flex;/*Flex布局*/

    display: -webkit-flex; /* Safari */

   justify-content:center;/*要加上*//*水平居中 IE11*/

    align-items:center;/*指定垂直居中*/

}

 

1. 1. 绝对定位+margin：auto

div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，

兼容性：,IE7及之前版本不支持

div{

width: 200px;

height: 200px;

background: green;

position:absolute;

left:0;

top: 0;

bottom: 0;

right: 0;

margin: auto;

}

 

1. 1. 绝对定位+margin负边距

div绝对定位水平垂直居中【margin 负间距】,这或许是当前最流行的使用方法。

div{

width:200px;

height: 200px;

background:green;

position: absolute;

left:50%;

top:50%;

margin-left:-100px;

margin-top:-100px;

}

 

1. 1. 绝对定位+transform

div绝对定位水平垂直居中【Transforms 变形】

兼容性：IE8不支持；

div{

width: 200px;

height: 200px;

background: green;

position:absolute;

left:50%; /* 定位父级的50% */

top:50%;

transform: translate(-50%,-50%); /*自己的50% */

}