CSS居中

如何让子元素在父元素中居中

1.子元素为行内元素

text-aligh：center；//水平居中
line-heigt：height；//垂直居中

2.子元素为块级元素

给父元素设置 
display：flex；
just-content：center；//垂直居中
align-items：center；//水平居中
给子元素设置：
margin：auto

3.给父元素设置position定位属性，子元素绝对定位

父元素：position：relative
子元素：
position：absolute；
margin：0 auto；
top:0;
botton:0;
left:0;
right:0

4.给父元素设置position定位属性，子元素绝对定位

 父元素：position：relative//相对定位
 子元素：
 position：absolute；//绝对定位
 left:50%;
 top:50%;
 margin-left:-50%;
 margin-top:-50%;

5.position & transform: translate(-50%, -50%) 实现块元素百分比居中

	 .parent {
	  positioin: relative;
	}
	.child {
	  positioin: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);//transfrom形变，transfrom（x,y）x轴y轴移动
	}

页面宽高正常显示和页面宽高缩放显示时，都保持，上下左右居中显示

5.1 transform:translate (-50%,-50%) 造成的文字模糊和解决方案

这是因为transform时div的宽度或者高度并不是偶数，移动50%之后，像素点并不是整数，出了小数，和显示像素没有对上。

解决方案是使用flex完成垂直居中，设置排列方向为column，并设置justify-content: center，最后用text-align: center完成水平居中。方能保证文字显示清晰。

优化方法：

1. 将transform: translate(-50%, -50%)改成transform: translate3d(-50%, -50%, 0)
可以解决抖动，但仍然模糊。
2. 将元素的高度设置为偶数可解决；
3. 将transform: translate(-50%, -50%)中的y轴单位改成px也可以解决
4. 改成transform: translate(-50%, -52%)也可以解决
（如果52%不行则从51%每个百分比尝试）

以上方法能较大程度优化问题，但仔细查看仍有细微抖动，最后用了第四种方法。

6.伪元素:before搭配vertical-align:middle实现元素垂直居中

使用伪类元素怎么居中

父元素： font-size: 0; 
子元素（伪元素）： 
:before {
	vertical-align: middle;
	}