几种常用的CSS居中方法，几行代码很简单

我们都知道margin:0 auto;可以让元素水平居中，但margin:auto却不能让元素垂直居中。

1. 最简单的水平居中方法

margin:0 auto;

​ 其实上面语法是margin-left和margin-right为auto的结合。从而达到水平居中效果。

2. 文字水平、垂直居中最简单方法

text-align:center
height:50px;
line-height:50px;

​ 只要设置line-height==height，文字就可以垂直居中

3. padding填充

   ​ 利用padding和background-clip配合实现div的水平居中：

   <div class="parent">
   	<div class="child"></div>
   </div>
   
   .parent{
   	width:400px;
   	height:200px;
   	background-color:blue;
   }
   .child{
   	width:200px;
   	height:100px;
   	padding:50px 100px;
   	background-color:yellow;
   	background-clip:content-box;/*居中的关键*/
   }
   
   /*padding的取值决定于parent减去child相应的宽高的再取一半*/
   

4. translate(-50%,-50%)

   ​ 用position和transform:translate(-50%,-50%)实现。

   <div class="parent">
   	<div class="child"></div>
   </div>
   
   .parent{
   	width:400px;
   	height:200px;
   	background-color:pink;
   }
   .child{
   	position:relative;
   	width:200px;
   	height:100px;
   	left:50%;//关键
   	top:50%;//关键
   	transform:translate(-50%,-50%);//关键
   	background-color:yellow;
   }
   /*这里上面三句关键是实现的重点，需要注意的是top、left的50%是相对parent的50%，即一开始将child向右移动400*50%=200px，向下移动200*50%=100px,此时child的左上角位遇parent的中心点处；此时再用translate(-50%,-50%)就可以将child平移至居中了，注意这里的-50%是相对child元素的宽高，即向左移动200*(-50%)=-100px以达到水平居中，垂直居中同理*/
   

5. margin:auto水平居中再和margin-top来调整以达到垂直居中。
6. 使用flex居中,仅适用弹性盒子

<div class="parent">
	<div class="child">嘻嘻，哈哈</div>
</div>

.parent{
	display:flex;/**/
	width:400px;
	height:200px;
	background-color:gray;
	align-items:center;/*垂直居中*/
	justify-content:center;/*水平居中*/
}
.child{
	background-color:blue;
}


enter;/*垂直居中*/
	justify-content:center;/*水平居中*/
}
.child{
	background-color:blue;
}