1. 居中元素的背景知识
在网页布局中，使元素水平居中并不是一项困难的技术，但是，在实际开发中可能会碰到多层嵌套元素居中的问题，这时候需要深入理解元素的盒子模型和排列方式。
首先，HTML元素会被渲染成一个盒子，该盒子可以由不同的组成部分，边框、内边距、内容区域和外边距组成。CSS的盒子模型定义了元素分为两种类型：块级元素和内联元素，块级元素的盒子宽度自动填满整个父元素，而内联元素则是根据内容撑开宽度。
其次，CSS提供了多种方式将元素水平居中，包括text-align、float、margin和position。在此，我们只讲解前两种方式，并着重分析使用margin实现水平居中时，不同盒子模型的影响。
1.1 text-align方式实现水平居中
这种方式只适用于块级元素。使用该方式，可以将元素内部的文本和内联元素水平居中，但是该元素本身并没有居中。可以通过设置该元素的属性值为center自动沿水平方向居中。
<div style="text-align: center;">
<p>这是一个块级元素</p>
</div>
1.2 float方式实现水平居中
使用float实现元素水平居中需要将元素设为浮动状态，并将其margin-left和margin-right值都设置为auto。
<div style="float: left; margin-left: auto; margin-right: auto;">
<p>这是一个块级元素</p>
</div>
值得注意的是，该方式仅适用于width属性已经设置的元素，并且该元素需要处于父容器的顶部。如果父容器本身没有宽度，浮动方式将不可用。因此，可以通过为其添加一个特定类来实现。下面展示的是一个为父容器添加fixed-width类名的代码样例：
<div class="fixed-width">
<div style="float: left; margin-left: auto; margin-right: auto;">
<p>这是一个块级元素</p>
</div>
</div>
2. 使用CSS margin实现水平居中
使用margin实现水平居中是目前最常用的方式，而实现的方式就是将左右margin值都设置为auto。下面分别从不同的盒子模型出发，说明不同状态下的居中方式。
2.1 margin:auto实现水平居中
使用该方法时，需要进行如下设置：
元素需要是块级元素或内联块级元素，或者是设置了float属性的元素
元素需要显式设置了宽度、高度或最小宽度等属性值，也就是说，元素不能自适应宽度
父元素必须明确宽度，否则margin:auto设置将没有效果
此时，元素就可以居中对齐：
<div class="container">
<div class="item-margin-auto">
<p>内容</p>
</div>
</div>
<style>
.container { width: 200px; border: 1px solid #333 ; }
.item-margin-auto {
width: 150px;
height: 150px;
margin-left: auto;
margin-right: auto;
background-color: #333;
}
</style>
2.2 绝对定位与margin:auto相结合实现居中
使用该方法时，需要进行如下设置：
子元素和父元素都需要设置位置非static，即为relative、absolute或fixed
子元素必须明确宽度，父元素宽度可以为自适应的
<div class="parent">
<div class="child">这是一个子元素</div>
</div>
<style>
.parent { width: 200px; height: 200px; border: 1px solid #333 ; position: relative; }
.child {
width: 150px;
height: 150px;
background-color: #333;
position: absolute;
top: 50%;
left: 50%;
margin: -75px 0 0 -75px;
}
</style>
2.3 Flexbox布局实现居中
在Flexbox布局中，有一组属性可以方便地实现元素居中对齐。
父容器需要设置属性display: flex。使用该属性后，子元素都会自适应宽度
使用justify-content属性来设置子元素在父容器内的水平对齐方式。可以设置的取值有flex-start、center、flex-end等
<div class="container">
<div class="item">元素1</div>
</div>
<style>
.container {
width: 200px;
height: 200px;
border: 1px solid #333 ;
display: flex;
justify-content: center;
}
.item {
width: 100px;
height: 100px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
}
</style>
3. 总结
在实际开发中，使用margin:auto实现居中就足够了，在CSS3中Flexbox已成为新的布局模式，也可以轻松完成水平垂直居中。
Flexbox布局具有以下优点：
容器中的子元素可以有不同的宽度，同时自适应容器的高度
可以轻易地实现水平和垂直居中
完全不用float，可以清晰地定义布局
容易实现自适应布局
支持重定向，因此完全不需要使用JavaScript实现相同的效果
在某些情况下（例如必须向后兼容旧版本的浏览器），Flexbox布局未必可行，此时使用margin方式进行水平居中依旧是一个可靠的方案。