作为一个切图的页面仔,工作中总是要用到垂直居中.忙的时候一般就随便google一个复制粘贴上去,也从来没有思考过内在的联系与原因,但是今天晚上听听音乐想看看书的时候,突然心血来潮.择日不如撞日,就今天吧,夯实一下我的基础,从此让所有垂直居中都变成纸老虎!!!
那么,先谈谈简单的垂直居中吧.
在CSS中想要实现水平居中可以说是十分简单了,行内元素用text-align:center,块级元素用margin:auto,元素就会乖乖的自己跑到元素水平中间去.
但是这么多年下来,垂直居中已经成为了CSS领域的圣杯.
可以说,一个不能解决这个问题的人简直是寸步难行.不管你想做一个怎样的网页,垂直居中都有很大的可能性会用到.但是,它并不简单,甚至可以说难于登天.
为了解决这个绝世难题,前端开发者们从各个方面想出了各种不同的点子.之前也许你在百度的某个角落里找到过一些碎片,今天我尝试将这些碎片组装起来,还原一个真正的垂直居中,也将自己的基础进行一次夯实.
1.表格布局法.
第一个想到表格布局法的人已经无法考证,但是不得不说这真的是一个Excited的做法.
<body>
<div class="Center-Container is-Table">
<div class="Table-Cell">
<div class="Center-Block">
<!-- CONTENT -->
</div>
</div>
</div>
</body>
<style>
.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
}
</style>
写一个表格,将需要居中显示的内容放在表格正中间.自适应,内容变方块大小也跟着变,兼容性更是不得了.
97.72%.基本没有不能兼容的.
嗯,所以应该说:
表格布局法的优点就是兼容性及其变态,基本没有不能兼容的.缺点也很明显,需要添加冗余的HTML样式,这在网页开发中一般是不能被接受的.而且display:table有极大的可能性会扰乱整个页面的布局,使用这种方法还是有一定风险的.
2.行内块法.
这个方法的本质是使用
display: inline-block;
vertical-align: middle;
让一个伪元素居于容器中央.
<div class="Center-Container is-Inline">
<div class="Center-Block">
<!-- CONTENT -->
</div>
</div>
<Style>
.Center-Container.is-Inline {
text-align: center;
overflow: auto;
}
.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
display: inline-block;
vertical-align: middle;
}
.Center-Container.is-Inline:after {
content: '';
height: 100%;
margin-left: -0.25em; /* To offset spacing. May vary by font */
}
.is-Inline .Center-Block {
max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}
</style>
也没什么好说的,看代码基本秒懂的级别.通过加一个翻看公司的项目,好像带我的老哥使用的就是这种办法.
但是我个人不喜欢这种方法.
先不说CSS写的又长又臭,在我看来这完全就是一种Hack,需要死记硬背且难以理解.如果有的选择,我不会选择这种方法.
3.基于绝对定位的解决方案.
这是一个古老的方法,具体有多古老?大概是在2013年4月6日.(链接至StackOverFlow)网上已经有了不少考古学家做了考证,我就不深挖了.它要求元素具有固定的宽度和高度.
<style>
main{
position:absolute; /*绝对定位*/
top: 50%;/*向下移动父元素高度一半*/
left:50%;/*向右移动父元素宽度一半*/
margin-top: -3em;/*1em为相对于父元素font-size的100%,-3em为向上移动6/2=3em*/
margin-left: -9em;
width: 18em;
height: 6em;
}
</style>
<body>
<main>
<h1>A quick brown fox jump over the lazy dog</h1>
</main>
</body
效果嘛...
可以看到,可以几乎完美的实现垂直居中.它的原理可以这么解释:
- top: 50%;
left:50%;
通过这个操作,我们将要添加的元素的左上角固定在了屏幕的正中间. - margin-top: -3em;
margin-left: -9em;
因为知道元素的大小,我们用它的一半作为移动值,将元素进行了移动.
等等,这样写好像有点累赘.让我们用calc()改一下.
<style>
main{
position:absolute; /*绝对定位*/
top: calc(50%-3em);/*向下移动父元素高度一半*/
left:calc(50%-9em)/*向右移动父元素宽度一半*/
width: 18em;
height: 6em;
}
</style>
<body>
<main>
<h1>A quick brown fox jump over the lazy dog</h1>
</main>
</body>
这样就明显好得多了.
这种做法看起来在大多数情况下都可以满足需求了.但是它有一个很大的局限性,就是我们需要计算偏移的量,这意味着我们必须知道这个元素多大.想到了什么没有?对啊,CSS为啥没有This?如果有This的话,这种问题就根本不是问题了.但是很遗憾的是,这个真没有.
等等,那就没有办法了?
不,为什么说后端学不会CSS呢?因为CSS是一个很.....神奇的东西.我们在translate()这个八竿子打不着的属性上居然找到了解决方法.translate()就是以自己本身为目标进行变换.查查API,略微思考以后,我们可以很轻易的写出这样的方法:
<style>
main{
position:absolute; /*绝对定位*/
top: 50%;/*向下移动父元素高度一半*/
left:50%;/*向右移动父元素宽度一半*/
transform: translate(-50%,-50%);
}
</style>
<body>
<main>
<h1>A quick brown fox jump over the lazy dog</h1>
</main>
</body>
这样就没什么问题了.
但是缺点还是存在的.首先当然是绝对定位的问题,老司机教导我们,能不用绝对定位尽量不要用绝对定位,不然布局出问题了调试起来很麻烦.然后嘛,就是这样的问题:
假如元素的高度超过了View层大小,怎么办?
比如这样:
可以很明显的看到,有一半的文字因为超出大小被裁掉了.这可不好玩.
另外,这种写法我也认为是一种Hack.如果在确定绝对定位可用且方便的情况下,我也许会用它.
4.使用VH?一个不错的主意.
我想使用translate()来移动元素进行定位.但是我不想用绝对定位,因为绝对定位是邪恶的.
这个问题很值得思考,那么如何在不用绝对定位的前提下进行定位呢?
我知道有朋友可能要抢答了:"用margin啊,我margin一个50%,不就实现居中了?弄这么多破事干啥?"
很遗憾,这是不行的.
<style>
main{
width: 10em;
padding: 1em 1em;
margin: 50% auto 0;
transform: translateY(-50%);
}
</style>
<body>
<main>
<h1>A quick brown fox jump over the lazy dog</h1>
</main>
这令人窒息的效果!令人窒息的滚动条!
深究其原因,margin的百分比是以父元素的宽度作为解析基准的.等等,父元素的宽度?那我用margin-top,margin-bottom怎么算?难道是不父元素的高度?
很遗憾,还是父元素的宽度为基准.这就可以说是相当的坑爹了.
那就没有办法了吗?不,现在我们有了CSS3,我们有了VH/VW!1VH相当于视口高度的1%,1VW相当于视口宽度的1%,完美!再也不用担心兼容大小屏幕啦!
在这里例子中如果我们使用VH单位:
<style>
main{
width: 10em;
padding: 1em 1em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
</style>
<body>
<main>
<h1>A quick brown fox jump over the lazy dog</h1>
</main>
</body>
完美的效果.
这个方法我认为没有缺点.但是适用性一般,毕竟只能应用于需要视口居中的页面
5.在座的各位都是垃圾-byFlex
终于讲到每天都在用的东西了.一个不会用Flex的前端,真是太可怕了.
我们只需要给父元素声明display:flex,再给这个元素在设置margin:auto,就可以做到垂直居中了.
<style>
body{
display: flex;
min-height: 100vh;
margin: 0;
}
main{
margin: auto;
}
</style>
<body>
<main>
<h1>A quick brown fox jump over the lazy dog</h1>
</main>
什么你问我兼容性?
97.19%的兼容性,你还有什么不满意的?简单粗暴高效.
但是它真的完美吗?不见得.
仔细看图不难发现,在你设置margin-auto之后,不只是垂直,水平也进行了居中.虽然我们可以用
main{
margin:auto 0 auto 0;
/*等同于margin-top: auto;margin-bottom: auto;*/
}
这样的写法让元素实现只垂直居中,但是毕竟又多考虑了两个属性.就没有更好的办法了吗?
5.plus,新的曙光.align-self.
于是我们有了更残暴的align-self(链接至MDN)这一属性.
它让垂直居中从圣杯变成了随便写写的东西.
我们只需要:
main{
align-self:center;
}
就能够彻底实现上面margin来margin去的效果.
总结的比较粗浅,所幸没有留下什么疑问.这个周末也过得非常充实,以后再碰到垂直居中的问题再也不会去搜啦!
我的blog是blog.codermagefox.com 欢迎来看看!
