【css】元素垂直水平居中的几种情况

写页面时免不了垂直居中、水平居中。在这里给出一些解决办法。

原理：

父元素 position: relative; 保证子元素不脱离父元素

子元素 position: absolute; 子元素相对于父元素布局，给出适当的left和top

 

 1、div内字符垂直居中：

 text-align: center;//水平居中
 height: 100px;
 line-height: 100px;//高度与行高一直，可实现垂直居中

2、外层div固定大小，内层div固定大小：

//外层div:
position:relative;
width:500px;
height:500px;
display:inlne-block;

//内层div：
width: 100px;
height: 100px;
display: inline-block;
position: absolute;
top:200px;
left:200px;

3、外层div是不固定大小， 内层div固定高度：

//外层div:
position:relative;

//内层div：
width: 100%;
height: 100px;
text-align: center;
display: inline-block;
position: absolute;
top: calc(50% - 50px);//距离左侧50%并向左偏移元素宽度100px的一半50px

4、外层不固定大小，内层也不固定大小：

//外层div:
position:relative;

//内层div：
display: inline-block;
position：absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);//偏移元素的一半宽度与高度