在写页面的时候，很多前端程序员都面临一个简单又复杂的问题——垂直居中。其实垂直居中一直都是个顽疾，曾经难倒无数英雄汉，但无数程序员的脑细胞的牺牲为我们探索了几招，攻克了垂直居中这一世界性难题。
水平居中很简单
有点基础的同学都知道，要实现水平居中非常简单。如果要居中的元素本身是行内元素（inline）,直接设置父级标签style样式：text-align:center。如果元素本身是块级标签，那么直接设置margin:o auto就行，同样适用于行内块级元素，当然把行内元素通过改变display属性值变成行内块级或者块级元素后同样适用，so easy.
如何垂直居中
有同学说把屏幕横过来，就居中了。脑洞太大但是没有人用用处。作为一个踏实勤奋又善于思考的前端攻城狮，要学会分析问题然后解决问题，正所谓看病抓药，就是这个道理，根据不同的情况选择最合适的方法，一击而中。开始吧！
1 对于最最基础的单行文本，要想实现垂直方向居中，很简单的方法就是让文本的行高等于父级元素的高度。这个仅适用于让当行文本垂直居中的情况，多行文本就不适用了。
2 如果是图片的话，直接设置img的属性vertical-align: middle;前提是需要设置父级元素为块级元素并且设置高度。
3 用absolute绝对定位，分别父级元素和子元素的position为
HTML：
节点内容节点内容
.out
.in {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
这个只适玉元素本身有规定的高度和宽度，但是实际应用中是要根据内容才能确定高度，所以就有了升级版
4 用absolute定位，并且可不限制高度。很简单，借助强大的CSS3中的translate() 变形函数。具体原理是translate() 属性值的百分比是元素本身的宽高为基准进行计算的，直接把margin的移动换成translate() 实现，让元素相对自身往左往上移动自己宽和高的一半，正好剧中。代码如下：
.in {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
我在宇宙中心
5 利用Flexbox布局
Flexbox 好像是专门为这类需求而生的一样。我们只需写两行代码轻松搞定：
第一是先给这个待居中元素的父元素设置 display:flex，第二是再给这个元素自身设置 margin:auto
这个方法的缺陷是并不是所有浏览器都支持，好消息是越来越多的浏览器已经支持了。
6 依靠科技进步
一行代码搞定，就和水平居中一样：align-self: center。不过这个仅仅是未来CSS的规划，还没有现实支持。
但是有这么好用的特性，我们肯定要第一时间去点赞的。
发表评论