css实现元素的居中

css样式实现居中

左右居中：

1，text-align: center;//实现行内元素的左右居中显示

2，margin：0 auto;//实现块级元素的左右居中显示

垂直居中：

1，在固定高度的情况下，使用line-height：父元素高度;实现行内元素的垂直居中。

2，利用position: relative;、margin-top:-(盒子的高度的一半);、top:50%;实现垂直居中，相对定位可以使用top，top占据父元素高度一半，margin-top设置负数，盒子向上挪动自身高度一半实现居中。

3，利用position: relative;、transform: translateY(-50%);、top:50%;实现垂直居中，相对定位可以使用top，top占据父元素高度一半，transform: translateY(-50%);使得盒子向上挪动自身高度一半实现居中。

4，父元素设置display: table;
子元素设置display: table-cell;vertical-align: middle;//实现垂直居中
text-align: center;//子元素前面的样式加上这句实现垂直和左右居中

同时实现垂直和左右居中

1，子绝父相，子元素样式设置：
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;

2，弹性盒子flex实现居中
display: flex;
align-items: center; /*定义父元素的元素垂直居中*/
justify-content: center; /*定义子元素的里的元素水平居中*/