水平居中和垂直居中

水平居中

若元素为inline元素

比如a,b,strong,i,span,img,input,select等， 为父元素设置text-align: center; 即可。

若元素为block元素

比如div,p,ul,li,ol,h1-h6,dl,dt,dd,address,article等

width: 固定;
margin: 0 auto;
复制代码

使用flex

display: flex; 
flex-direction:row; /*设置主轴方向为水平方向(默认)*/
justify-content: center; /*主轴对齐方式*/
复制代码

兼容性：IE8/9不支持。

使用CSS3中新增的transform属性

.parent{ position: relative;}
.son{ 
  position:absolute; 
  top: 50%;
  left: 50%; 
  /*往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。*/
  transform:translate(-50%, -50%);
}
复制代码

兼容性：IE8不支持。

绝对定位方式

1. 设置margin负半值

position: absolute;  /*注意绝对定位*/
width: 固定; 
left: 50%;  /*偏移量设置为50%*/
margin-left: -0.5宽度; /* -宽度/2*/
复制代码

2. 设置left:0; right:0; margin:0 auto;

position: absolute; 
width: 固定; 
left: 0; 
right: 0; 
margin: 0 auto;
复制代码

垂直居中

若元素是单行文本

设置line-height等于父元素的高度。

这种方法只适用于单行文本的元素，比如块级元素里面文本、图片。

若元素为行内块元素（流行）

给元素设置display:inline-block;属性，需要使用一个伪元素让内容块处于容器的中央, 注意要给这个伪类高度设置高度100%。

.parent::after, .son{        /*父级元素和子元素都设置display:inline-block*/
    display:inline-block;
    vertical-align: middle;   /*设置vertical-align:middle*/
}
.parent::after{   /*父元素添加一个伪类,并且设置高度100%*/ 
    content:"";
    height:100%;
}
复制代码

兼容性：IE6及以下不可用

使用flex

display: flex;
align-items: center;  /*居中*/
复制代码

绝对定位方式

1. 设置margin负半值，且父元素为相对定位

position: absolute; 
top: 50%; 
height: 固定; 
margin-top: -0.5高度;
复制代码

2. 设置top:0; bottom:0; margin:0 auto;

position:absolute;
height:固定;
top:0;
bottom:0;
margin:auto 0;
复制代码

总结

flex, transform, 绝对定位 这几种方法同时适用于水平居中和垂直居中。

转载于:https://juejin.im/post/5c91bf79f265da60f85fefd4