几种元素居中的方法

有几种css样式居中的方法今天来总结一下：

1.有宽度的div

方法1:

.contain{
width:100px;
display:block(这一步很重要。如果元素是行内元素这里需要转换一下);
margin:o auto;
}

方法2：

.contain{
width:100px;
position:absolute;
left:50%;
margin-left:-50px;
}

方法3：

.contain{
width:100px;
display:inline-block;
text-align:center;
}

方法4：

.contain{
width:100px;
position:absolute;
left:0;
right:0;
margin:auto;
}

方法5：

.contain{
width:100px;
position:absolute;
left:50%;
transformX:translate(-50%);
}

方法6：CSS3 Flex实现元素的水平居中和垂直居中

1.单个元素水平居中

.contain{ 
display: flex;
justify-content:center;
}

2.多个h1元素水平居中

	<div class="box">
	    <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
	    <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
	    <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
	</div>

	.box{
	    display: flex;
	    justify-content:center;
	    width:100%;
	    background:#0099cc}

3:多个h1标签并排垂直居中

<div class="box">
	    <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
	    <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
	    <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
</div>

	.box{
	    display: flex;
	    width:980px;
	    height:30rem;
	    align-items:center;
	    background:#0099cc
	}
	h1{
	    font-size:1rem;
	    padding:1rem;
	    border:1px dashed#FFF;
	    color:#FFF}