元素居中是实际前端开发中常用的一种操作。元素居中分为垂直居中和水平居中，为了以后方便重查，本篇文章总结一下一些常见的对齐方式。
样例代码如下，查看时请参考下面的代码。
水平居中
文本水平居中
text-align属性
div水平居中
- 蓝色盒子，将父容器设为
text-align:center，div设为display:inline-block，适用于多个div水平居中。 - 【推荐】黄色盒子，使用
margin:auto属性设置（需要设置宽度） - 【推荐，常用于响应式开发，注意脱离文档流带来的问题】绿色盒子，父容器
position:relative，div设置position:absolute和left:50%和transform:translateX(-50%) - 绿色盒子，父容器
position:relative，div设置position:absolute和left:50%和margin-left:(-width/2) - 【极度推荐,响应式，无需计算margin】粉色盒子，父容器
display:flex并flex-direction:row（默认），然后justify-content:center（要看主轴的方向）
右对齐
文本右对齐
- 使用
text-align:right
div右对齐
- 使用
position:absolute和right:0实现 - 【推荐】使用
flex布局 - （十分奇妙）使用
margin-left:auto，需要设置宽度 - 使用
float，注意脱离文档流带来的问题（eg：如果高度大于父容器，则需要设置父容器overflow:auto） - 将父容器设为
text-align:right，div设为display:inline-block
垂直居中
垂直居中不太好演示，代码直接在这里写了。
文本垂直居中
- 《不推荐》使用
padding - 【推荐】使用
height和line-height设置，考虑文本多行
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
div垂直居中
- 父容器设置
line-height和height等高，div设置为display:inline-block和vertical-align:middle
.parent{
height:200px;
line-height:200px;
}
.child{
display:inline-block;
vertical-align:middle;
}
- 父容器
position:relative，div设置position:absolute和top:50%和margin-top:(-height/2) - 【推荐,响应式】父容器
position:relative，div设置position:absolute和top:50%和transform:translateY(-50%)
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
transform:translateY(-50%);
}
- 【极度推荐,响应式，无需计算margin】使用
flex
.parent{
display:flex;
align-items:center;
}
.child{
width:100px;
height:100px;
}
