水平垂直居中

水平居中

一、如果是行内元素，则设置

text-align: center;

二、如果是块级元素或者行内块级元素
则有以下几种：

1. 子元素设置margin: 0 auto;

margin: 0 auto;

2. 父元素设置flex 和 justify-content

display: flex;
justify-content: center;

3. 父元素相对定位，子元素绝对定位

/* 父元素 */
position: relative;

/* 子元素 */
position: absolute;
left: 50%;
transform: translateX(-50%);

/* 或者 */
margin-left: -50%;

/* 或者 */
left: 0;
rigth: 0;
margin: 0 auto;

4. 盒模型

/* 父元素 */
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;

垂直居中

一、 如果是单行文本则设置light-height等于元素的高度

二、如果是行内块级元素或者块级元素

1. flex布局

display: flex;
align-items: center;

2. 定位

/* 父元素相对定位 */
position: relative;

/* 子元素 */
position: absolute;
top: 50%;
margin-top: -50%;

/* 或 */
transform: translateY(-50%);

/* 或 */
top:0;
bottom:0;
margin:auto 0;

3. 盒模型

display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-box-pack: center;

4. calc 动态计算
   父元素随意

/*子元素*/
width: 100px;
height:100px;
position: relative;
/* 距离顶部的百分比 - 子元素自身高度的一半*/
top: calc(50% - 50px);
margin: auto;

5. 元素高度不固定时

/* 父元素 */
display: table;

/* 子元素 */
dispaly: table-cell
vertical-align: center;