CSS布局之元素水平居中
本文将依次介绍在不同条件下实现水平居中多种方法
一、使用 text-align: center ；
适用于块级元素内部的行内元素水平居中（也适用于图片的水平居中）
此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。
<style>
.box{
width: 300px;
height: 100px;
text-align: center;/*设置子元素内的行内元素水平居中*/
border: 1px solid #222222;
}
</style>
<body>
<div class="box">
<p>这是需要水平居中的文字</p>
</div>
</body>
此外，如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。
<style>
.box{ /*父元素的盒子*/
text-align:center;
}
.child { /*子元素的盒子*/
display: inline-block;/*将块级元素转为行内元素实现居中。但不建议，因为转换了元素类型，可能会破坏布局*/
}
</style>
<body>
<div class="box">
<div class="child">这是需要居中的内容</div>
</div>
</body>
二、使用margin: 0 auto；
利用margin属性的auto值，设置左右自动居中对齐（只能设置水平居中，对垂直居中无效）
1.先将子元素设置为块级元素并有具体的宽度，再使用margin：0 auto；进行水平居中
<style>
.child {
width: 100px;
margin: 0 auto;
}
</style>
<body>
<div class="box">
<div class="child">Demo</div>
</div>
</body>
2.若不知道子元素具体宽度可用width:fit-content配合margin和text-align使用
<!--fit-content兼容性不太好，经常要加浏览器前缀，暂时不推荐经常使用-->
<style>
.child {
width:fit-content;/*类似于包裹内容，宽度为内容宽度*/
margin: 0 auto;
text-align:center;
}
</style>
<body>
<div class="box">
<div class="child">Demo</div>
</div>
</body>
3.用display:table；将子元素设为table元素，宽度为内容宽。
<style>
.child {
display: table;/*将元素转换为table类型*/
margin: 0 auto;/*设置上下外边距为0，左右外边距自动*/
}
</style>
<body>
<div class="box">
<div class="child">Demo</div>
</div>
</body>
三、使用相对定位relative和绝对定位absolute
步骤：
（1）先将父元素设置为相对定位relative
（2）将子元素设置为绝对定位absolute（子绝父相）
（3）向右移动子元素，移动距离为父容器的一半（50%）
（4）通过向左移动子元素的一半宽度以达到水平居中。（通过transform或margin实现）
1.transform属性：不定宽，不需要有确定的宽度也可实现居中
<style>
.box {
position:relative;/*父元素设置相对定位，宽度继承页面宽度*/
}
.child {
position:absolute;
left:50%;/*定位元素左上角的点距离父元素左边框50%的父元素宽度*/
/*移动默认以元素左上角的点移动，移动后元素左上角的点移动到父元素的水平中心，导致子元素本身整体偏右*/
transform:translateX(-50%);
/*通过transform向左移动子元素宽度的一半，使原来偏右的元素向左移动使元素的中心点可以正好对齐父元素的水平中心点，最终实现水平居中*/
}
</style>
<body>
<div class="box">
<div class="child">Demo</div>
</div>
</body>
不过transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀
2.margin属性：
子元素必须设置确定的宽度，且margin值不能用百分制会导致失效，要使用px
可以用于浮动元素
<style>
.box {
position:relative;/*父元素设置相对定位，宽度继承页面宽度*/
}
/*方法一*/
.child {
width:500px;
position:absolute;
left:50%;
margin-left:-100px;
/*设置子元素的外边距为负的子元素宽度的一半，本题子元素宽500px，则设置margin-left的值为-250px。参考下图*/
}
/*方法二
.child{
position: absolute;
width: 500px;
left: 0;
right: 0;
margin: 0 auto;
}
*/
</style>
<body>
<div class="box">
<div class="child">Demo</div>
</div>
</body>
四、使用弹性盒子flex布局（通用方法）
1.通过使用flex中的 justify-content 属性来达到水平居中
<!--justify-content属性：
设置多个子元素同时居中
适用于所有子元素，浮动的子元素也可以
-->
<style>
.box{
display: flex;/*开启弹性盒子*/
justify-content:center;/*设置主轴水平方向居中对齐，对子元素生效*/
/*若子元素有多个，此方法可以对多个子元素同时生效，设置多个子元素同时在一排紧靠在一起居中*/
}
</style>
<body>
<div class="box">
<div class="child">Demo</div>
<div class="child">Demo</div>
</div>
</body>
2.通过使用flex中的 flex-direction:column配合子元素设置align-self属性来达到水平居中。
<!--align-self属性：
对子元素使用（解决有多个子元素，用flex布局实现其中单个子元素的居中的问题）
-->
<style>
.box{
display: flex;/*开启弹性盒子*/
flex-direction:column;/*设置主轴为纵向排列*/
}
.child{
align-self:center;/*设置本身元素水平居中*/
}
</style>
<body>
<div class="box">
<div class="child">Demo</div>
</div>
</body>
2.通过使用flex配合margin属性
<!--margin方法-->
<style>
.box {
display: flex;/*父元素开启弹性盒子*/
}
.child {
margin:0 auto;/*子元素利用maigin的auto值设置居中*/
}
</style>
<body>
<div class="box">
<div class="child">Demo</div>
</div>
</body>