常见的CSS居中及布局方法
css居中是前端开发中常用方法，掌握各种居中的方法可以提高开发效率，对准确的还原设计页面有很大的帮助。本文章整理了一些在开发中常用的居中技巧。
1.水平居中
1.1内联元素水平居中
利用text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素inline, 内联块inline-block, 内联表(inline-table, inline-flex元素水平居中都有效。核心代码：
.parent{
text-align:center;
}
1.2块级元素水平居中
通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。核心代码：
.child{
margin:0 auto;
}
1.3 多块级元素水平居中
1.3.1 利用inline-block
如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。核心代码：
.parent{
text-align:center;
}
.child-1, .child-2{
display:inline-block;
}
1.3.2 利用display: flex
利用弹性布局flex，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。核心代码：
.parent{
display: flex;
justify-content: center;
}
2.垂直居中
2.1单行内联(inline-)元素垂直居中
通过设置内联元素的高度height和行高line-height相等，从而使元素垂直居中核心代码：
.parent{
height:150px;
line-height:150px;
}
2.2 多行元素垂直居中
2.2.1 利用表布局（table）
利用表布局的vertical-align: middle可以实现子元素的垂直居中。核心代码：
.parent{
display:table
}
.child{
display: table-cell;
vertical-align: middle;
}
2.2.2 利用flex布局
利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。核心代码：
.parent{
display:flex;
flex-direction:column;
justify-content:center;
}
2.3 块级元素垂直居中
2.3.1 固定高度的块级元素
如果已知居中元素的高度和宽度，垂直居中问题就很简单。通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。核心代码：
.parent{
position:relative;
}
.child{
position:absolute;
height:60px;
top:50%;
margin-top:-30px;
}
2.3.2 未知高度的块级元素
当垂直居中的元素的高度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。部分浏览器存在兼容性的问题。
核心代码：
.parent{
position:relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
3.水平垂直居中
3.1 未知宽高元素水平垂直居中
利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。核心代码：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.2 利用flex布局
利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
核心代码：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
4.常见布局方法
html文档：
<div class="parent">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
4.1左列定宽，右列自适应
html文档：
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
核心css代码:
.left{float:left;width:100px;}
.right{margin-left:100px;}
显示效果如下图所示：
利用
float+margin实现，该种布局左侧一般为导航栏，右侧为内容。
4.2右列定宽，左列自适应
核心css代码：
.parent{background:red;height:100px;margin:0 auto;}
.left{background:green;margin-right:-100px;width:100%;float:left;}
.right{float:right;width:100px;background:blue;}
利用float+margin实现，显示效果如下：
4.3两列定宽，一列自适应
html结构：
<div class="parent">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
核心css代码：
.left,.center{float:left:width:200px;}
.right{margin-left:400px;}
利用float+margin实现，显示效果如下：
4.4两侧定宽，中栏自适应
核心css代码：
.left{width：100px;float:left;}
.center{float:left;width:100%;margin-right:-200px;}
.right{width:100px;float:right;}
利用float+margin实现，显示效果如下：
4.5一列不定宽，一列自适应
核心css代码：
利用float+overflow实现:
.left{float:left;}
.right{overflow:hidden;}
利用flex实现
.parent{display:flex;}
.right{flex:1;}
显示效果如下：
参考资料：利用HTML和CSS实现常见的布局 15种CSS居中的方式
