龙喵专栏 /前端 /内容

CSS垂直居中技巧,我只会23个,你会几个?

版权声明:龙喵网!!!网站网址:http://ailongmiao.com

自古以来(是有多古?)~网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈们的研究后,据说CSS的垂直居中技巧已达到近十种之多,但始终鲜为人知,部分公司甚至将CSS的垂直居中技巧当成了面试题目,其重要性可见一斑,经过了 Amos 通灵了一下之后把垂直居中的写法扩增到了23个,今天就让 Amos 带着大家轻松的了解一下CSS的垂直居中的方式吧。

CSS垂直居中技巧,我只会23个,你会几个?

1. Line-height

适用情景:单行文字垂直居中技巧

这个方式应该是最多人知道的了,常见于单行文字的应用,像是按钮这一类物件,或者是选单、导览列此类物件最常见到此方式了。此方式的原理是在于将单行文字的行高设定后,文字会位于行高的垂直中间位置,利用此原理就能轻松达成垂直居中的需求了。

<style>
.content{
  width: 400px;
  background: #ccc;
  line-height:100px;
  margin: auto;
}
</style>
<div class="content">Lorem ipsam.</div>

你也可以直接到我的 codepen 來看 使用 Line-height 达到垂直居中

2. Line-height + inline-block

适用情景:多物件的垂直居中技巧

既然可以使用第一种方式对行元素达成垂直居中的话,当然没有理由不能做到多行啊~但是你需要将多个元素或多行元素当成一个行元素来看待,所以我们必须要将这些数据多包一层,并将其设定为 inline-block,并在该 inline-block物件的外层物件使用line-height来替代 height 的设定,如此便可以达到垂直居中的目的了,从使你的数据是包含了标题跟内容在内也可以正常的垂直居中了。

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  line-height: 200px;
  text-align: center;
}
.box2 .content{
  display: inline-block;
  height: auto;
  line-height:1;
  width: 400px;
  background: #ccc;
}
</style>
<div class="box box2">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 line-height + inline-block 多行垂直居中方式

3. :before + inline-block

适用情景:多物件的CSS垂直居中技巧

:before 伪类物件搭配 inline-block 属性的写法应该是很传统的垂直居中技巧了,此方式的好处在于子层居中物件可以不需要特别设定高度,我们利用将 :before 伪类物件设定为 100% 高的inline-block,再搭配上将需要居中的子物件同样设定成 inline-block 性质后,就能使用 vertical-align: middle 来达到垂直居中的目的了,此方式在以往其实是个非常棒的垂直居中解决方案,唯独需要特别处理掉 inline-block物件之间的4-5px空间这个小缺点,但也很实用了。

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  text-align: center;
}
.box::before{
  content:'';
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
.box .content{
  width: 400px;
  background: #ccc;
  display: inline-block;
  vertical-align: middle;
}
</style>
<h2>3.:before + inline-block</h2>
<div class="box box3">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 :before + inline-block 垂直居中方式

4. absolute + margin负值

适用情景:多行文字的垂直居中技巧

谁说绝对定位要少用的?Amos 认为没有少用多用的问题,重点在于你是否有「妥善运用」才是重点,绝对定位在这个例子中会设定top: 50% 来抓取空间高度的 50%,接着再将居中物件的 marign-top 设定为负一半的高度,这样就能让物件居中啦,此方法可是自古以来流传了多年的居中方式呢!

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.box4 .content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top:50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -35px;
}
</style>
<h2>4.absolute + margin 負值</h2>
<div class="box box4">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 absolute + margin 負值的垂直居中方式

5. absolute + margin auto

适用情景:多行文字的垂直居中技巧

绝对定位的垂直居中又一个,这个方式比较特别一点,当物件设定绝对定位之后,预设它是抓不到整体可运用空间的范围,所以 margin: auto 此时会失效,但当你设定了 top: 0; bottom: 0 时,绝对定位物件就抓到可运用的空间了,这时你的 margin: auto 就生效了(神奇吧),如果你的绝对定位物件需要水平居中于父层,那你同样可以设定 left: 0; right: 0; 来让绝对定位物件取得空间可运用范围,再让 margin-leftmargin-right 设定为 auto 即可居中。但此方式的缺点是你的定位物件必须有固定的宽高(%数也可)才能正常居中。

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
</style>
<h2>5.absolute + translate(-50%, -50%)</h2>
<div class="box box5">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 absolute + margin: auto 垂直居中方式

6. absolute + translate

适用情景:多行文字的垂直居中技巧

再一个绝对定位居中的方式,此方式应该算是最方便的了,因为此居中的定位物件不需要固定的宽跟高,我们利用绝对定位时的 lefttop 设定物件的上方跟左方各都为 50% ,再利用 translate(-50%, -50%) 位移居中物件自身宽与高的 50% 就能达成居中的目的了。(CSS3 好棒棒!!)

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.box5 .content{
  width: 400px;
  background: #ccc;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
<h2>6.absolute + margin: auto</h2>
<div class="box box6">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 absolute + translate(-50%, -50%) 垂直居中方式

7. Flex + align-items

适用情景:多行文字的垂直居中技巧

Flex ! 前端的毒品!后端的宝物!这东西自从面世之后就不断的考验网页教学者的良心,到底要不要抛弃 float 拥抱 flex,我想这答案人人心中自有一把尺,但先碰 Flex 再碰 Float 可谓先甘后苦,这顺序到底要倒吃甘蔗还是正吃甘蔗实在难说,自从有了 Flex 之后,小孩考试一百分,设计网页不跑版,客户网页都RWD,老板爽赚好开心,我也加薪加班好甘干心,不由的说 Flex 真的是一个神物,我们只要设定父层 display: flex 以及设定次轴(cross axis)居中属性 align-items: center 就好了(讲那么多结果重点就一行字是哪招啦),这个方式的优点是此层不需设定高度即可自动居中,且原始码乾淨无比,真的是用一次就让你升天啦。

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center; 
}
.content{
  width: 400px;
  background: #ccc;
}
</style>
<h2>7.Flex + align-items</h2>
<div class="box box7">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 Flex + align-items 垂直居中方式

8. Flex + :before + flex-grow

适用情景:多行文字的垂直居中技巧

Flex 有多种方式可以让你把资料居中,使用 Flex-grow 的延展特性来达成,这个例子中 Amos 使用了 flex-direction: column 直式排法,搭配 :before 伪元素使用 flex-grow 伸展值能够取得剩下所有空间的特性,把他设定成一半的剩馀空间就能做到把内容资料准确的推到垂直中间位置,算是个传统技法的延伸方式。(这样的话上面第七个方式不是比较快?)

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box:before{
  content: '';
  flex-grow: .5;
}
.content{
  width: 400px;
  background: #ccc;
}
</style>
<h2>8.Flex + before + flex-grow</h2>
<div class="box box8">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 Flex + before + flex-grow 垂直居中方式

9. Flex + margin

适用情景:多行文字的垂直居中技巧

继续用 Flex 来居中,由于 Flex 物件对空间解读的特殊性,我们只要在父层物件设定 display: flex,接着在需要垂直居中的物件上设定 margin: auto 即可自动居中。

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}
</style>
<h2>9.Flex + margin</h2>
<div class="box box9">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 Flex + margin 垂直居中方式

10. Flex + align-self

适用情景:多行文字的垂直居中技巧

align-self 应该大家都不陌生,基本上就是对 flex 次轴(cross axis)的个别对齐方式,只要对单一子层物件设定 align-self: center 就能达成垂直居中的目的了。

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  justify-content: center;
}
.content{
  width: 400px;
  background: #ccc;
  align-self: center
}
</style>
<h2>10.Flex + align-self</h2>
<div class="box box10">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 Flex + align-self 垂直居中方式

11. Flex + align-content

适用情景:多行文字的垂直居中技巧

在正常的状况下,align-conent 仅能对次轴多行 flex item 做居中,但是当我今天子层物件不确定有多少个时,且有时可能会有单个的情况出现的话,此技巧就能用到了(当然你也能其他解法),既然是多行子物件才能用,那我们就为单个子物件多加两个兄弟吧,使用 :before 以及 :after 来让子物件增加到多个,这样就能使用 flex 的 align-content 属性来居中。

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}
.content{
  width: 400px;
  background: #ccc;
}
.box11:before,
.box11:after{
  content: '';
  display: block;
  width:100%;
}
</style>
<h2>11.Flex + align-content</h2>
<div class="box box11">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 Flex + align-content 垂直居中方式

12. Grid + template

适用情景:多行文字的垂直居中技巧

CSS grid 最令人惊豔的就是这个 template 的功能了,简直就是把区块当画布在使用一般,我们仅需要把样板设定成三列,就能搞定垂直居中啦。

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 
    '. . .'
    '. amos .'
    '. . .';
}
.content{
  width: 400px;
  background: #ccc;
  grid-area: amos;
}
</style>
<h2>12.Grid + template</h2>
<div class="box box12">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 Grid + template 垂直居中方式

13. Grid + align-items

适用情景:多行文字的垂直居中技巧

align-items 不仅是 Flex 可用,连 CSS grid 也拥有此属性可使用,但在 Flex 中 align-items 是针对次轴(cross axis)作对齐,而在 CSS Grid 中则是针对Y轴作对齐,你可以把他想像成是表格中储存格的 vertical-align 属性看待,就可以很容易理解了。

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  justify-content: center;
  align-items: center; 
}
.content{
  width: 400px;
  background: #ccc;
}
</style>
<h2>13.Grid + align-items</h2>
<div class="box box13">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 Grid + align-items 垂直居中方式

14. Grid + align-content

适用情景:多行文字的垂直居中技巧

CSS grid 的 align-content 跟 Flex 的 align-content 有点差异,CSS grid 对于空间的解释会跟 Flex 有一些些的落差,所以导致 align-content 在 Flex 中仅能针对多行物件有作用,但在 Grid 中就没这问题了,所以我们可以很开心的使用 align-content 来对子项物件做垂直居中,私毫不费力气喔。

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  justify-content: center;
  align-content: center; 
}
.content{
  width: 400px;
  background: #ccc;
}
</style>
<h2>14.Grid + align-content</h2>
<div class="box box14">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 Grid + align-content 垂直居中方式

15. Grid + align-self

适用情景:多行文字的垂直居中技巧

align-self 应该大家都不陌生,基本上就是对 grid Y轴的个别对齐方式,只要对单一子层物件设定 align-self: center 就能达成垂直居中的目的了。

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  justify-content: center;
}
.content{
  width: 400px;
  background: #ccc;
  align-self: center;
}
</style>
<h2>15.Grid + align-self</h2>
<div class="box box15">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 Grid + align-self 垂直居中方式

16. Grid + place-items

适用情景:多行文字的垂直居中技巧

place-items 这属性不知道有多少人用过,此属性是 align-itemsjustify-items 的缩写,简单的说就是水平跟垂直的对齐方式,想当然的,设定 center 就能居中。

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  height: 150px;
  margin: 0 auto;
  place-items: center;
}
.content{
  width: 400px;
  background: #ccc;
}
</style>
<h2>16.Grid + place-items</h2>
<div class="box box16">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 Grid + place-items 垂直居中方式

17. Grid + place-content

适用情景:多行文字的垂直居中技巧

place-content 这属性不知道有多少人用过,此属性是 align-contentjustify-content 的缩写,简单的说就是水平跟垂直的对齐方式,想当然的,设定 center 就能居中。

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  height: 150px;
  margin: 0 auto;
  place-content: center;
}
.content{
  width: 400px;
  background: #ccc;
}
</style>
<h2>17.Grid + place-content</h2>
<div class="box box17">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

也可以直接到我的 codepen 來看 Grid + place-content 的垂直居中方式

18. Grid + margin

适用情景:多行文字的垂直居中技巧

继续用 Grid 来居中,由于 Grid 物件对空间解读的特殊性,我们只要在父层物件设定 display: grid,接着在需要垂直居中的物件上设定 margin: auto 即可自动居中。(咦?这描述怎似曾相似)

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
}
.content{
  width: 400px;
  background: #ccc;
  margin:auto;
}
</style>
<h2>18.Grid + margin</h2>
<div class="box box18">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 Grid + margin 垂直居中方式

19. Display: table-cell

适用情景:多行文字的垂直居中技巧

这一招我想有点年纪的开者应该都有看过了,当然像我这么嫩的开发者当然是第一次看到啦(这是什么干话),这一招的原理在于使用 CSS display 属性将div设定成表格的储存格,这样就能利用支援储存格垂直对齐的 vertical-align 属性来将资料垂直居中啦。

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}
</style>
<h2>19.display: table-cell</h2>
<div class="box box19">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 display: table-cell 垂直居中方式

20. calc

适用情景:多行文字的垂直居中技巧

Calc 是计算机英文单字「calculator」的缩写,这个由微软提出的CSS方法,真的是网页开发的一大福音啊!我们竟然可以在网页中直接做计算!?这真是太猛啦,从此我们再也不用在那边绞尽脑汁的计算数学,或是想办法用 JavaScript 来动态计算,我们可以很亲公司轻松的利用 calc() 这个「计算机」方法,来将百分比即时且动态的计算出实际要的什么高度,真可谓划时代的一个方法啊!但这个方法需要注意的是太过大量的使用的话,网页效能会是比较差的,所以请审慎使用喔。

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
}
.content{
  width: 400px;
  background: #ccc;
  position: relative;
  top:calc((100% - 70px) / 2);
  margin:auto;
  height: 70px;
}
</style>
<h2>20.calc</h2>
<div class="box box20">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 calc 垂直居中方式

21. Relative + translateY

适用情景:多行文字的垂直居中技巧

这个技巧利用了Top: 50% 的招式,让你的物件上方能产生固定%数的距离,接着让要居中的物件本身使用 tranlateY 的%数来达成垂直居中的需求,tranlate 是一个很棒的属性,由于 tranlate 的百分比单位是利用物件自身的尺寸作为 100% ,这样让我们要利用物件自身宽高做事变得方便很多呢!

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
}
.content{
  width: 400px;
  background: #ccc;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
}
</style>
<h2>21.relative + translateY(-50%)</h2>
<div class="box box21">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 relative + translateY(-50%) 垂直居中方式

22. Padding

适用情景:多行文字的垂直居中技巧

这的确也算是一种垂直居中的方式,不可讳言的这方式真的是简单过头了,以至于有些开发者认为这种方式不能算是一种垂直居中技巧

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  height: auto;
  padding: 50px 0;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}
</style>
<h2>22.padding</h2>
<div class="box box22">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

你也可以直接到我的 codepen 來看 使用 padding 垂直居中

23. Writing-mode

适用情景:多行文字的垂直居中技巧

这个方式应该是比较少见到有人使用的了,这个想法是被老友 Paul 所激发的,writing-mode 这个CSS属性的功能基本上跟垂直居中是八竿子打不上关系,它的用途是改变文字书写的方向从横书变直书,且支援度从很早期的IE5就有支援了,但当时Amos鲜少使用,一来是网页多是横书居多,另外当时除了IE浏览器以外,其他浏览器的支援度似乎都不太好,也就很少使用了。

使用 writing-mode 将一整个文字容器变成直书,接着将此容器利用text-align: center 来达到垂直居中的目的,白话一点的解说的话,就是你把原本横排的文字,变成直排了,所以原本横排用到的水平对齐中间(text-align: center),就变成了控制直排的中间了(垂直居中),原理就是这么简单。但要特别注意的是浏览器对此语法的支援来说,需要拆开写法才行,不然某些浏览器吃的语法不同,可能会让你的网页在某些浏览器上看起来无效,这会是最需要注意到的。

<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  writing-mode: tb-lr; /* for ie11 */
  writing-mode: vertical-lr;
  text-align: center;
  margin:0 auto;
}
.content{
  width: 400px;
  background: #ccc;
  display: inline-block; /* for ie & edge */
  width: 100%;
  writing-mode: lr-tb;
  margin: auto; 
  text-align: left;
}
.box .txt{
  width: 80%;
  margin: auto;
}
</style>
<h2>23.writing-mode</h2>
<div class="box box23">
  <div class="content">
    <div class="txt">
      立馬來看 Amos 實際完成的
      <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
        CSS3精美相簿效果
      </a>
      效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
      這個置中的想法來自於 Paul 
    </div>
  </div>
</div>
你也可以直接到我的 codepen 來看 使用 writing-mode 达到垂直居中方式
版权声明:龙喵网!!!网站网址:http://ailongmiao.com

作者:Amos

来源:http://csscoke.com/2018/08/21/css-vertical-align/

1.部分文章来自网络,如有侵犯权益,请联络博主,资源失效与内容勘误留言说明.

2.如若转载,请注明出处:http://ailongmiao.com/read/80.html

[ web前端导航 ]:http://ailongmiao.com/web/

评论

继续阅读

细数CSS伪元素及其用法

Web前端 2019-03-29 1

CSS中有两个很常见的概念,伪类和伪元素。伪类用于在页面中的元素处于某个状态时,为其添加指定的样式。伪元素会创建一个抽象的伪元

GET和POST的区别

Web前端 2019-03-11 6

最近看了一些同学的面经,发现无论什么技术岗位,还是会问到 get 和 post 的区别?让我们先看一下标准答案长什么样子 w3school: GET

彻底解决滚动穿透方案

Web前端 2019-02-15 7

有一层遮罩蒙层覆盖在body上时,当我们滚动遮罩层,它下面的内容也会跟着一起滚动,看起来好像是上面的滚动事件穿透到下面的DOM元素上

  选择打赏方式

打赏

打赏