垂直居中下
grid + template
利用CSS Grid的template功能，仅需要把模板设置成三列，就能搞定垂直居中。适用于未知高度的多行文字的垂直居中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>垂直居中</title> <style> .box{ width: 400px; 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: 200px; background: #ccc; grid-area: amos; } </style> </head> <body> <div class="box"> <div class="content"> <div>aaa</div> <div>bbb</div> <div>ccc</div> </div> </div> </body> </html>
Grid + align-items
在Flex中align-items是针对次轴cross axis作对齐。而在CSS Grid中则是针对Y轴做对齐，可以把它想象成是表格中储存单元格的vertical-align属性看待。适用于子元素多行且高度不固定的垂直居中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>垂直居中</title> <style> .box{ width: 400px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; justify-content: center; align-items: center; } .content{ width: 200px; background: #ccc; } </style> </head> <body> <div class="box"> <div class="content"> <div>aaa</div> <div>bbb</div> <div>ccc</div> </div> </div> </body> </html>
Grid + align-content
align-content在Flex中仅能针对多行元素起作用，但在Grid中就没这个问题，所以可以使用align-content来对子元素做垂直居中。适用于子元素多行且高度不固定的垂直居中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>垂直居中</title> <style> .box{ width: 400px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; justify-content: center; align-content: center; } .content{ width: 200px; background: #ccc; } </style> </head> <body> <div class="box"> <div class="content"> <div>aaa</div> <div>bbb</div> <div>ccc</div> </div> </div> </body> </html>
Grid + align-self
align-self 基本上就是对grid Y轴的个别对齐方式，只要对单一子层元素设置为align-self:center就能达成垂直居中的目的了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>垂直居中</title> <style> .box{ width: 400px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; justify-content: center; } .content{ width: 200px; background: #ccc; align-self: center; } </style> </head> <body> <div class="box"> <div class="content"> <div>aaa</div> <div>bbb</div> <div>ccc</div> </div> </div> </body> </html>
Grid + place-items
place-items是align-items与justify-items的缩写，简单的说就是水平与垂直的对齐方式，只需要设定center就能显示居中了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>垂直居中</title> <style> .box{ width: 400px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; place-items: center; } .content{ width: 200px; background: #ccc; } </style> </head> <body> <div class="box"> <div class="content"> <div>aaa</div> <div>bbb</div> <div>ccc</div> </div> </div> </body> </html>
Grid + place-content
和上面一样，place-content是align-content与justify-content的缩写，也就是水平与垂直的对齐方式，只需要设置center就能实现居中。
.box{ width: 400px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; place-content: center; } .content{ width: 200px; background: #ccc; } </style> </head> <body> <div class="box"> <div class="content"> <div>aaa</div> <div>bbb</div> <div>ccc</div> </div> </div> </body> </html>
Grid + margin
由于Grid元素对空间解读的特殊性，只要在父层元素设定display:grid，接着在需要垂直居中的元素上设置margin:auto即可自动居中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>垂直居中</title> <style> .box{ width: 400px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; } .content{ width: 200px; background: #ccc; margin:auto; } </style> </head> <body> <div class="box"> <div class="content"> <div>aaa</div> <div>bbb</div> <div>ccc</div> </div> </div> </body> </html>
display：table-cell
该方法使用 CSS display属性将div设置成表格的单元格，这样就能利用支持存储单元格对齐的vertical-align属性来将信息垂直居中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>垂直居中</title> <style> .box{ width: 400px; height: 250px; border: 1px solid #f00; margin:0 auto; text-align: center; display: table-cell; vertical-align: middle; } .content{ width: 200px; background: #ccc; margin:auto; } </style> </head> <body> <div class="box"> <div class="content"> <div>aaa</div> <div>bbb</div> <div>ccc</div> </div> </div> </body> </html>
relative + translateY
这个技巧是利用了top:50%的招式，让你的元素上方能产生固定百分比的距离。接着让要居中的元素本身使用tanslateY的百分比来达成垂直居中的需求，translate是一个很棒的属性，由于translate的百分比单位是利用元素自身的尺寸作为100%，这样让我们要利用元素自身宽高做事变得方便很多。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>垂直居中</title> <style> .box{ width: 400px; height: 250px; border: 1px solid #f00; margin:0 auto; } .content{ width: 200px; background: #ccc; position: relative; top: 50%; transform: translateY(-50%); margin: auto; } </style> </head> <body> <div class="box"> <div class="content"> <div>aaa</div> <div>bbb</div> <div>ccc</div> </div> </div> </body> </html>
Write-mode
它的用途是改变文字书写的方向从横变竖，且支持度从很早期的IE5就有支持了，但当时很少使用，一来是网页多是横书较多，另外当时除了IE浏览器意外，其他浏览器的支持度都不是很好，也就很少使用了。
使用write-mode将一整个文字容器变成直书，接着将此容器利用text-align:center来达到垂直居中的目的。简单说就是把原本横排的文字变成竖排，所以原本横排用到的水平对齐方式，就变成了控制直排的中间了。
但要特别注意的是浏览器对此语法的支持度来说，需要拆开写法才行，不然某些浏览器的语法不同，可能会让你的网页在某些浏览器上看起来无效，这会是最需要注意到的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>垂直居中</title> <style> .box{ width: 400px; height: 250px; border: 1px solid #f00; margin:0 auto; writing-mode: tb-lr; /* for ie11 */ writing-mode: vertical-lr; text-align: center; } .content{ display: inline-block; /* for ie & edge */ width: 100%; writing-mode: lr-tb; margin: auto; background: #ccc; } .text{ margin: auto; } </style> </head> <body> <div class="box"> <div class="content"> <div class="text"> <div>aaa</div> <div>bbb</div> <div>ccc</div> </div> </div> </div> </body> </html>
