在说垂直居中之前,我们先回顾一下 水平居中
- 如果它是一个行内元素,对父元素应用 text-align: center 即可
- 如果它是一个块级元素,对元素自身应用 margin: auto 即可
设计场景
- 垂直居中是现实开发中常见的需求之一
- 当要对宽高不固定的元素进行垂直居中的时候,开发的哥哥们就要挠头了
基于绝对定位的解决方案
- 结构:
<div class="main">
<h1>标题</h1>
<p>固定宽高元素垂直居中</P>
</div>
- 风格:
.main {
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
width: 200px;
height: 100px;
}
之前在[《网页设计手法之“满幅的背景,定宽的内容”》][1]一文中,有讲过calc()函数,基于该函数,我们可以对上面的风格做个优化:
.main {
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 50px);
width: 200px;
height: 100px;
}
很显然,这个方法的最大局限性在于 元素的宽高必须是固定的;但很多时候,元素的大小是由其内容决定的,我们就得找一个 **百分比值是以自身的宽高为基准的属性 **
.main {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
基于视口单位的解决方案
当不使用绝对定位的时候,我们就会丢失left和top,此时我们面临的问题是:如何把这个元素的左上角放置在容器的正中心?
.main {
width: 200px;
margin: 50vh auto 0;
transform: translateY(-50%);
}
结合了 固定宽度+margin 的水平居中方法
使用视口单位vh,即1vh表示视口高度的1%;它是以整个视口为参照标准的
注意:它只适用于在视口中居中的场景
基于FlexBox的解决方案
body {
display: flex;
min-height: 100vh;
}
.main {
margin: auto;
}
注意:
待居中元素的父元素 display: flex + 待居中元素的父元素的固定高度 + 待居中元素margin: auto,可以实现水平垂直方向上的居中;
如果浏览器不支持Flexbox,垂直居中就会丢失,居中的元素就会紧贴着顶部,看起来还是可以接受的,也算是一种 优雅降级 吧
[1]:http://www.jianshu.com/p/a92f8f8f4d82
《CSS SECRETS》
网友评论
flex-box 真的令人蛋疼,其实也可以用display:table-cell的方法做