CSS元素居中对齐

CSS元素如何居中对齐？

水平居中

1. text-align:center; 对文本元素设置水平居中

我们可以看到span和input标签都实现了水平居中。虽然div1水平居中了，但是div2没有水平居中，只是里面的文字水平居中。所以我们可以得出：text-align对文本、行内元素、块级元素生效，对块级元素无效。
那么，为什么div标签没有水平居中，但是div标签里的文字却是水平居中的？原因是，CSS具有继承性，div标签继承了父元素的text-align属性，使得div内的文字对div水平居中。

2. margin:0 auto; 对块级元素实现水平居中
   由于块级元素在水平方向上直接占满整个父容器的宽度，所以当水平方向上padding、border、width都是定值时，margin左右外边距设置为auto，默认会由margin左右平分剩余空间，从而达到水平居中效果。
3. 使用position和transform

position:absolute;
left:50%;
transform:translateX(-50%);

position:absolute;给元素设置绝对定位，left:50%;让其距离左边偏移父元素的50%，然后通过transform:translateS(-50%);让其向左平移自身宽度50%，从而实现水平居中的效果

垂直居中

1. line-height 把行高line-height和高度height设置为一样，可以实现文本元素的垂直对齐，该做法只适用于文本、行内块元素、行内元素的垂直居中，块级元素的垂直不适用。
2. flex布局 flex布局中，通过设置侧轴上子元素排列方式为center，可以把元素垂直居中，适用于所有类型的元素。

display:flex;
flex-direction:row;   /*设置主轴方向是水平方向*/
align-items:center;   /*设置侧轴上，子元素的排列方式是居中对齐*/

3. 使用position和transform 使用该方法实现垂直居中的原理和上面所讲的水平居中类型，先让元素向下移动父元素的50%，在向上移动自身的50%，从而移动到父元素垂直居中的位置

position:absolute;
top:50%;
transform:translateY(-50%);