前端开发在页面搭建初期，往往须要咱们具备框架性的思维，依据设计图来划分页面板块构造，以及在不同尺寸设施间的差别解决。把握一些常见的布局，能够使咱们事倍功半，本文就来聊一聊居中布局。
文字居中对齐
题目所说的居中对齐是指一个div内的文字在其程度和垂直方向都处于核心的地位。假如有上面DOM构造：
<div class="wrap"> <span>对齐形式：程度垂直居中</span> </div>款式代码如下：
.wrap { height: 100px; border: 2px solid blueviolet;}在浏览器中渲染进去大略是上面的样子：
咱们通过css款式来分步骤达到居中对齐的成果
文字水平居中
这个是很根底的前端常识，只须要给款式中加上text-align: center
.wrap { height: 100px; border: 2px solid blueviolet; text-align: center;}浏览器后果：
文字垂直居中
当初需要又要变更，须要文字在容器中垂直方向也要居中，怎么办？应用margin或者padding？还是应用定位？恐怕都不够优良。其实只有在加一行款式即可 line-height: 100px
.wrap { height: 100px; border: 2px solid blueviolet; text-align: center; line-height: 100px;}浏览器后果：
可见只有设置一个容器的line-height和height一样大时，它外部的文字就能够垂直居中，这个属性也实用于a标签等其余标签，在写按钮的款式须要按钮文字居中时很有用。
块元素居中对齐
思考有上面的DOM构造
<div class="parent02"> <div class="child01">块元素：垂直居中对齐</div></div>款式代码如下，浏览器成果如图
.parent02 { height: 100px; border: 2px solid rgba(13,202,240,.8);}.child01 { background-color: rgb(48, 245, 245); width: 80%; height: 50%;}程度居中对齐
只有给.child01 中增加一行 margin: 0 auto即可程度居中
.child01 { background-color: rgb(48, 245, 245); width: 80%; height: 50%; margin: 0 auto;}垂直居中对齐
仔细的小伙伴可能留神到上边.child01的高度设置为父级的50%，咱们能够设置它的margin-top或者parent02的padding-top来达到垂直居中的目标，然而如果.parent02和.child01的高度都不确定呢？恐怕就须要不停的批改款式了。这时flex布局就能够帮了，只须要在父级中设置即可，退出下边两行，无论.parent02和.child01的高度怎么变动都能够放弃居中
.parent02 { height: 100px; border: 2px solid rgba(13,202,240,.8); display: flex; align-items: center;}功败垂成！到这里本文要说的居中布局就要告一段落了，咱们来回顾一下次要关键点
- 文字居中应用 text-align 和 line-height
- 块元素居中应用 margin：0 auto 和 flex
心愿本文对你能有帮忙^_^
原文连贯