在CSS中對元素進行水平居中是非常簡單的:如果它是一個行內元素,就對它的父元素應用text-align: center ;如果它是一個區塊級元素,就對它本身應用margin: auto。然而如果要對一個元素進行垂直居中,可能光是想想就令人頭皮發麻了。
多年來,垂直居中已經成為了CSS領域的聖杯,它同樣也是前端開發圈內廣為流傳的笑話。原因在於它同時具備下列幾個特質:
1)它極為常見的需求。
2)從理論上來看,它似乎極為簡單。
3)在實踐中,它往往難如登天,而當涉及大小不固定的元素時尤其如此。
接下來我們先說明這三種方法的簡單使用。
一、程式碼初始化
我們基於以下這段HTML程式碼,將id='content'的div元素在id='box'的div張垂直居中。
<body> <div id="box"> <div id="content">这是要居中的元素</div> </div> </body>
#box{ margin:0; padding:0; width:500px; height:500px; background: #4AC291; font-size:100%; position: relative; } #content{ background: #655; color: white; text-align: center; line-height: 2em; }
二、基于绝对定位的解决方法
如果我们想要利用绝对定位的方法进行垂直剧中的话,那么就要求元素具有固定的宽度和高度,如果没有固定的宽度和高度就无法实现,因为需要利用top和left的值,进行定位。
#box{ margin:0; padding:0; width:500px; height:500px; background: #4AC291; font-size:100%; position: relative; //必须的,因为下面的div要根据这个进行定位 } #content{ background: #655; color: white; text-align: center; line-height: 2em; position: absolute; //设置绝对定位 top:50%; left:50%; width:12em; height:2em; margin-top:-1em; // 2/2=1 margin-left:-6em; // 12/2=6 }
如上图所示,是固定宽高的样式效果。
这段代码在本质上做了这样几件事情:先把这个元素的左上角放置在视口(或最近的、具有定位属性的祖先元素)的正中心,然后再利用负外边距把它向左、向上移动(移动距离相当于它自身宽高的一半),从而把元素的正中心放置在视口的正中心。借助强大的 calc() 函数,这段代码还可以省掉两行声明:
#box{ margin:0; padding:0; width:500px; height:500px; background: #4AC291; font-size:100%; position: relative; } #content{ background: #655; color: white; text-align: center; line-height: 2em; /*position: absolute; top:50%; left:50%; width:12em; height:2em; margin-top:-1em; margin-left:-6em;*/ position: absolute; width: 12em; height: 2em; top: calc(50% - 1em); left: calc(50% - 6em); }
这个方法最大的局限在于它要求元素的宽高是固定的。在通常情况下,对那些需要居中的元素来说,其尺寸往往是由其内容来决定的。如果能找到一个属性的百分比值以元素自身的宽高作为解析基准,那我们的难题就迎刃而解了!遗憾的是,对于绝大多数CSS属性(包括 margin)来说,百分比都是以其父元素的尺寸为基准进行解析的。
三、基于视口单位的解决方法
假设我们不想使用绝对定位,仍然可以采用translate()技巧来把这个元素以其自身宽高的一半为距离进行移动;但是在缺少left和top的情况下,如何把这个元素的左上角放置的容器的正中心呢?
我们的第一反应很可能是用margin属性的百分比值来实现,就像这样:
#content { width: 12em; margin: 50% auto 0; transform: translateY(-50%); }
这段代码产生的效果十分离谱。原因在于margin的百分比值时以父元素的宽度作为解析基准的。没错,即使对于margin-top和margin-bottom来说也是这样!
不过幸运的是,如果只是想把元素相对于视口进行居中,仍然是有希望的。CSS值与单位(第三版)定义了一套新的单位,称为视口相关的长度单位。
1) vw 是与视口宽度相关的。与常人的直觉不符的是,1vw 实际上表示视口宽度的 1%,而不是 100%。
2) 与 vw 类似,1vh 表示视口高度的 1%。
3) 当视口宽度小于高度时,1vmin 等于 1vw,否则等于 1vh。
4) 当视口宽度大于高度时,1vmax 等于 1vw,否则等于 1vh。
四、Flexbox方法(本文主要说明的方法)
Flexbox(伸缩盒)是专门针对这类需求所设计的。我们之所以要讨论其他方案,仅仅是因为那些方案在浏览器的支持程度上稍微好一些而已。其实目前现代浏览器对 Flexbox 的支持度已经相当不错了。
我们只需写两行声明即可:先给这个待居中元素的父元素设置 display: flex(在这个例子中是元素),再给这个元素自身设置我们再熟悉不过的margin: auto。
#box{ display: flex; min-height:50vh; margin:0; width:500px; height:500px; background: #4AC291; } #content{ margin:auto; background: #655; color: white; }
如果浏览器不支持Flexbox,页面渲染结果看起来就跟我们的起点图是一样的了(如果设置了宽度的话)。虽然没有垂直居中效果,但也是完全可以接受的。
Flexbo 的另一个好处在于,它还可以将匿名容器(即没有被标签包裹的文本节点)垂直居中。
以上是CSS垂直居中的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!