今天看到一篇神文，讲解了23中垂直居中的方法，现在自己参照原文进行每一种方法的详细讲解。
以下是所有例子中的公共CSS部分
*{
margin: 0;
padding: 0;
}
h2{text-align: center;}
.flex{
display: flex;
}
.grid{display: grid;}
.box{
border: 1px solid red;
width: 80%;
height: 150px;
margin: auto;
}
.content{
width: 400px;
background-color: #ccc;
}
.margin-auto{margin: auto;}
.height-100{height: 100px;}
.relative{position: relative;}
.abs{position: absolute;}
.left_right{
left: 0;
right: 0;
}
.top_btm{
top: 0;
bottom: 0;
}
.margin-top-50{
margin-top: -50px;
}
.top-50{top:50%;}
.left-50{left:50%;}
.translate_50{
transform: translate(-50%, -50%);
}
.translateY_50{
transform: translateY(-50%);
}
.table-cell{
display: table-cell;
min-width: 400px;
vertical-align: middle;
text-align: center;
}
.inline-block{display: inline-block;text-align: center;}
.line-height-150{line-height: 150px;}
.line-height-2{line-height: 2;}
.vertical-align-middle{vertical-align:middle;}
.text-center{text-align: center;}
.before::before{
display: inline-block;
content: '';
height: 100%;
width: 0;
vertical-align: middle;
}
.flex-before{
flex-direction: column;
align-items: center;
}
.flex-before::before{
flex-grow: .5;
content: '';
}
.flex-wrap{flex-wrap: wrap;}
.flex-before-after::before,
.flex-before-after::after{
content: '';
width: 100%;
display: block;
}
.align-items-center{align-items: center;}
.align-content-center{align-content: center;}
.justify-content-center{justify-content: center;}
.align-self-center{align-self: center;}
.place-items-center{place-items:center;}
.place-content-center{place-content:center;}
.place-self-center{place-self:center;}
.top-calc{
top:calc( (100% - 100px) / 2);
}
.grid-template{
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 1fr auto 1fr;
grid-template-areas:
'. . .'
'. ttt .'
'. . .';
}
.grid-area-amos{
grid-area: ttt;
}
.padding{
padding: 50px 0;
}
.height-auto{
height: auto;
}
.table{
display: table;
width: 80%;
margin: auto;
}
1. line-height
使用情景： 单行文字垂直居中。
在没有设置高度的时候，高度与行高一致，此时文字会位于行高的垂直居中的位置。如果设置了高度，将行高设置为与高度相同即可。
<h2>1. line-height</h2>
<div class="box text-center line-height-150 margin-auto">
I am text
</div>
2. inline-block + vertical-align + line-height
适用情景：多对象的垂直居中技巧
既然可以使用第一种方式对行元素达成垂直居中的话，当然没有理由不能做到多行啊~
但是你需要将多个元素或多行元素当成一个行元素来看待，所以我们必须要将这些数据多包一层，并将其设定为inline-block， 且为其设置vertical-algin:center，并在该inline-block对象的外层对象使用line-height来代替height的设置。
<h2>2. inline-block+vertical-align</h2>
<div class="box text-center line-height-150">
<div class="content inline-block vertical-align-middle line-height-2">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
3. :before + inline-block
这个写法还是很有意思的，看完后我自己感觉还是很有收获的。
适用情景：多对象的CSS垂直居中技巧
:before 伪类元素搭配 inline-block 属性的写法应该是很传统的垂直居中的技巧了。
此方式的好处在于子元素居中可以不需要特别设定高度，我们将利用:before伪类元素设定为100%高的inline-block，再搭配上将需要居中的子元素同样设置成inline-block性质后。
就能使用vertical-align:middle来达到垂直居中的目的了，此方式在以往其实是个非常棒的垂直居中解决方案，唯独需要特别处理掉inline-block元素之间的4-5px空间这个小缺陷，但也很实用了。
<h2>3. :before+inline-block</h2>
<div class="box text-center before">
<div class="content inline-block vertical-align-middle">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
这里伪元素::before的运用十分的巧妙，有以下几个关键点
- 父容器
box3设置了height - ::before设置了
display:inline-block;，使伪元素成为内联元素 - ::before设置了
content:''使伪元素生效 - ::before设置了
heigth:100%;使伪元素的高度与父容器的高度一致，为后面的vertical-align做铺垫 - ::before设置了
width:0;使伪元素不占据实际的空间，但是参与页面的布局 - content设置
inline-block是为了使vertical-algin:middle;生效，而vertical-align参照的对象是::before。所以结果就会垂直居中
其实看了上面的解释，我们发现一切的工作都是为了使vertical-align生效。所以这个vertical-align还是十分神奇的，后面有时间需要好好研究一下。
4. absolute+top+transform
适用情景：多行文字的垂直居中技巧
因为此居中的定位元素不需要固定的宽高，我们利用绝对定位时的top 与right设置元素的上方跟左方各为50% 。
再利用translate(-50%,-50%)位移居中元素自身宽与高的50%就能达成居中的目的了。
<h2>4. absolute+top+transform</h2>
<div class="box relative">
<div class="content height-100 abs top-50 left-50 translate_50">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
5. absolute + margin-auto
适用情景：多行文字的垂直居中技巧
又一个绝对定位的垂直居中的方案，这个方式比较特别一点，当元素设置为绝对定位后，假设它是抓不到整体可运用的空间范围。
所以margin:auto会失效，但当你设置了top:0;bottom:0;时，绝对定位元素就抓到了可运用的空间了，这时你的margin:auto就生效了（神奇吧）。
如果你的绝对定位元素需要水平居中于父层，那你同样可以设定left:0;right:0;来让绝对定位元素取得空间可运用范围，再让marign-left与margin-right设定为auto即可居中。
但此方式的缺点是你的定位元素必须有固定的宽高（百分比也算）才能正常居中。
<div class="box relative">
<div class="content margin-auto height-100 abs left_right top_btm">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
6. relative + calc
适用情景：多行文字的垂直居中技巧
我们竟然可以在网页中直接做计算，这真是太猛了，从此我们再也不用在那边绞尽脑汁的数学计算了，或是想办法用js来动态计算。
我们可以很轻松的利用calc()这个方法，来将百分比及时且动态的计算出实际要的是什么高度，真可谓是划时代的一个方法啊。
但这个方法需要注意的是大量使用的话，网页性能会是比较差的，所以请谨慎使用。
<div class="box">
<div class="content text-center top-calc relative margin-auto height-100">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
7. relative + translateY
适用情景：多行文字的垂直居中技巧
这个技巧是利用了top:50%的招式，让你的元素上方能产生固定百分比的距离。
接着让要居中的元素本身使用tanslateY的百分比来达成垂直居中的需求，translate是一个很棒的属性，由于translate的百分比单位是利用元素自身的尺寸作为100%，这样让我们要利用元素自身宽高做事变得方便很多。
<h2>7. relative + translateY </h2>
<div class="box">
<div class="content text-center top-50 relative margin-auto translateY_50">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
8. relative + margin
多行文字的垂直居中技巧
绝对定位在这个例子中会设置top:50%来抓取空间高度的50%。
接着在将居中元素的margin-top设定为负一半的高度，这样就能让元素居中了
<h2>8. relative + margin </h2>
<div class="box">
<div class="content text-center height-100 top-50 relative margin-auto margin-top-50">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
9. flex + margin-auto
适用情景：多行文字的垂直居中技巧
用Flex来居中，由于Flex元素对空间解读的特殊性，我们只要在父层元素设定display:flex，接着在需要垂直居中的元素上设定margin:auto，即可自动居中
<h2>9. flex + margin-auto</h2>
<div class="box flex">
<div class="content margin-auto">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
10. flex + align-items
适用情景：多行文字的垂直居中技巧
不由的说Flex真的是一个神物，我们只要设定父层display:flex以及设定次轴(cross axis)属性align-items:center 就好了
<h2>10. flex + align-items</h2>
<div class="box flex align-items-center justify-content-center">
<div class="content text-center">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
11. flex + align-self
适用情景：多行文字的垂直居中技巧
align-self 应该大家都不陌生，基本上就是对flex次轴cross axis 的个别对齐方式只要对单一子层元素设定align-self:center就能达成垂直居中的目的了。
<h2>11. flex + align-self</h2>
<div class="box flex justify-content-center">
<div class="content align-self-center text-center">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
12. flex + align-content + ::before + ::after
适用情景：多行文字的垂直居中技巧
在正常的状况下，align-content 仅能对次轴多行flex item做居中，但是当我今天子层元素不确定有多少个时。
且有时可能会有单个的情况出现时，此技巧就能用到了（当然你也能有其他解法），既然是多行子元素才能用。
那我们就为单个子组件多加两个兄弟吧，使用:before以及:after 来让子元素增加到多个，这样就能使用flex的align-content属性来居中
<h2>12. flex + align-content + before + after + flex-wrap</h2>
<div class="box flex flex-wrap align-content-center justify-content-center flex-before-after">
<div class="content text-center">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
13. flex + flex-direction + ::before + flex-grow
适用情景：多行文字的垂直居中技巧
Flex有多种方式可以让你把数据居中，适用Flex-grow的延展特性来达成。
这个例子中Amos适用了flex-direction:column直式排法，搭配:before伪元素适用flex-grow伸展值能够取得剩下所有空间的特性。
把它设定成一半的剩余空间就能做到把内容数据准确的推到垂直中间位置，算是个传统技法的延伸方式
<h2>13. flex + align-items + before + flex-direction+ flex-grow</h2>
<div class="box flex flex-before">
<div class="content text-center">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
14. gird + margin-auto
适用情景：多行文字的垂直居中技巧
CSS Grid的align-content跟Flex的align-content有点差异，CSS Grid对于空间的解释会跟Flex有一些些的落差。
所以导致align-content在Flex中仅能针对多行元素起作用，但在Grid中就没这个问题，所以我们可以很开心的使用align-content来对子元素做垂直居中，丝毫不费力气
<h2>14. grid + margin-auto</h2>
<div class="box grid">
<div class="content margin-auto">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
15. gird + align-items
适用情景：多行文字的垂直居中技巧
align-items不仅是Flex可用，连CSS Grid也拥有此属性可使用，但在Flex中align-items是针对次轴cross axis作对齐。
而在CSS Grid中则是针对Y轴做对齐，你可以把它想象成是表格中储存单元格的vertical-align属性看待，就可以很好理解了
<h2>15. grid + align-items</h2>
<div class="box grid align-items-center justify-content-center">
<div class="content text-center">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
16. gird + align-content
适用情景：多行文字的垂直居中技巧
CSS Grid的align-content跟Flex的align-content有点差异，CSS Grid对于空间的解释会跟Flex有一些些的落差。
所以导致align-content在Flex中仅能针对多行元素起作用，但在Grid中就没这个问题，所以我们可以很开心的使用align-content来对子元素做垂直居中，丝毫不费力气
<h2>16. grid + align-content</h2>
<div class="box grid align-content-center justify-content-center">
<div class="content text-center">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
17. gird + align-self
适用情景：多行文字的垂直居中技巧
align-self 应该大家都不陌生，基本上就是对grid Y轴的个别对齐方式，只要对单一子层元素设置为align-self:center就能达成垂直居中的目的了
<h2>17. grid + align-self</h2>
<div class="box grid justify-content-center">
<div class="content text-center align-self-center">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
18. gird + place-items
适用情景：多行文字的垂直居中技巧
place-items这属性不知道有多少人用过，此属性是align-items与justify-items的缩写，简单的说就是水平与垂直的对齐方式，想当然的，设定center就能居中
<h2>18. grid + place-items</h2>
<div class="box grid place-items-center">
<div class="content text-center">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
19. gird + place-content
适用情景：多行文字的垂直居中技巧
place-content这属性有多少人用过，此属性是align-content与justify-content的缩写，简单的说就是水平与垂直的对齐方式，想当然的，设置center就能居中了
<h2>19. grid + place-content</h2>
<div class="box grid place-content-center">
<div class="content text-center">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
20. gird + place-self
适用情景：多行文字的垂直居中技巧
此属性是align-self与justify-self的缩写，简单的说就是水平与垂直的对齐方式，想当然的，设置center就能居中了
<h2>20. grid + place-self</h2>
<div class="box grid">
<div class="content text-center place-self-center">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
21. gird + grid-template
适用情景：多行文字的垂直居中技巧
CSS Grid最令人惊讶的就是这个template的功能了，简直就是把块元素当画布在使用，我们仅需要把模板设置成三列，就能搞定垂直居中了
<h2>21. grid + grid-template + grid-area</h2>
<div class="box grid grid-template">
<div class="content text-center grid-area-amos">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
22. table-cell
适用情景：多行文字的垂直居中技巧
这一招的原理在于使用 CSS display属性将div设置成表格的单元格，这样就能利用支持存储单元格对齐的vertical-align属性来将信息垂直居中
<h2>22. table-cell</h2>
<div class="table">
<div class="box table-cell">
<div class="content margin-auto">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
</div>
23. padding
适用情景：多行文字的垂直居中技巧
虽然很简单，但你无法反驳的是，我的数据的确垂直居中啦
<h2>23. padding</h2>
<div class="box padding height-auto">
<div class="content margin-auto text-center">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
24. write-mode
多行文字的垂直居中技巧
它的用途是改变文字书写的方向从横变竖，且支持度从很早期的IE5就有支持了，但当时Amos很少使用，一来是网页多是横书较多，另外当时除了IE浏览器意外，其他浏览器的支持度都不是很好，也就很少使用了。
使用write-mode将一整个文字容器变成直书，接着将此容器利用text-align:center来达到垂直居中的目的。
白话一点的解说就是，你把原本横排的文字变成竖排，所以原本横排用到的水平对齐方式，就变成了控制直排的中间了。
原理就是这么简单。
但要特别注意的是浏览器对此语法的支持度来说，需要拆开写法才行，不然某些浏览器的语法不同，可能会让你的网页在某些浏览器上看起来无效，这会是最需要注意到的
CSS
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;
}
HTML
<h2>23.writing-mode</h2>立马来看Amos实际完成的
<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>
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
