css垂直水平居中

/*html部分*/

<div class="container">

<div class="inner"></div>

</div>

1.利用绝对定位和负外边距居中，此种方法需要知道inner元素的宽高

.container{width:500px;height:500px;position:relative;}

.inner{width:100px;height:100px;position:absolute;top:50%;left:50%;margin-left:-50px;margin-top:-50px;}

2.利用绝对定位和transform：translate，此种方法不需要知道inner元素的宽高

.container{width:500px;height:500px;position:relative;}

.inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

3.利用绝对定位和margin：auto,此种情况需要知道子元素宽高，不然子元素会占满父元素。

.container{width:500px;height:500px;position:relative;}

.inner{width:100px;height:100px;position:absolute;top;0;left:0;right:0;bottom:0;margin:auto}

4.利用display：table-cell

.container{width:500px;height:500px;display:table-cell;vertical-align:middle;text-align:center}

5.利用display：flex

.container{width:500px;height:500px;display:flex;justify-content:center;align-items:center;}

6.利用display：flex；margin：auto

.container{width:500px;height:500px;display:flex}

.inner{margin:auto}

转载于:https://www.cnblogs.com/helloMySir/p/8413796.html