在我们做网站的过程中，怎么都逃不掉居中这个话题，各种花里胡哨的，可能只需要掌握两三个就可以完成一个网页的布局了。今天就来介绍下水平居中有哪些方法。
第一种，设置当前元素水平居中，元素为block时
要让p元素水平居中：
<body><div class="father"><p>我是block元素，我要水平居中</p></div>
</body>css代码：
p{width :200px;margin: 0 auto;
}margin 左右auto 对于block元素是非常好用的;（这里它的父元素（div）会被p元素撑起来，所以是有高度的）
第二种，
<body><div class="father"><p>我是block元素，我要水平居中</p> </div>
</body>css代码：
.father{position: relative;height:100vh;
}
p{position: absolute;top:0;left:50%;transform:translateX(-50%);
}使用position定位加translateX（-50%）或者margin-right(设置居中元素的宽度);
同样是水平居中，但是这种是我比较喜欢的，很灵活,虽然可以使用margin,但是建议最好不要用margin来调整位置，因为很多情况下元素的宽度带小数而且有时出Bug(没有效果)，所以推荐使用translateX，不需要思考（直接设置-50%），没有bug，舒服的一批。
但是这种设置完后父元素如果没有其他元素支撑高度是会为0的，（有时没多大关系）不过最好还是设置一个高度。
第三种：
css代码，html还是上面的
.father{text-align:center;height:100vh;
}是我刚学CSS时比较脑残喜欢用的，text-align : center;简单粗暴，进行水平居中（放在要设置居中元素的父元素上），如果单个block元素是没问题的。但是有两个就会失效了，必须把block元素变成inline-block才能使用；
第4种：、
.father{display:flex;height:100vh;justify-content:center;
}使用flex布局，使父元素成为一个弹性盒，使用justify-content:center;即可达到居中，注意在flex布局中所有元素的都会连在一起，没有缝隙，(所以在我们需要精确对齐时是非常有效的，不会受到缝隙的影响)，居中后元素性质不变（还是block）但是宽度变成内容（所有父元素中的元素都会排成一排像火车一样）多宽它就多宽；高度和父元素高度一样。
