在Css中对元素进行水平居中是很简单的，如果他是一个行内元素，对它的父元素应用text-align:center；如果是一个块级元素，就对自身应用margin:auto。然而如果要对一个元素进行垂直居中，想想就头皮发麻。本文主要探索以Css3为基础进行元素的垂直居中，对当下流行的几种技巧不做讨论，原因如下：
- 表格布局法：需要用到一些冗余的HTML元素
- 行内块法：这个方法Hack味道过浓。
一、基于绝对定位的垂直居中
- 以下两种技巧都需要使用绝对定位
- calc实现
- 内容部分必须固定宽和高
- translate实现
- 内容部分可以自适应宽和高
- 某些浏览器会导致元素模糊，可用transform-style:preserve-3d来修复，因为元素可能被放置在半个像素上
- 示例代码：
<head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ position: relative; width: 400px; height: 150px; border: 1px solid red; } .wrap .cont{ position: absolute; top: calc(50% - 30px); left: calc(50% - 50px); width: 100px; height: 60px; background: gray; } .wrap02{ position: relative; width: 400px; height: 150px; border: 1px solid red; } .wrap02 .cont{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: gray; } </style> </head> <body> <div class="wrap"> <div class="cont">这个内容部分需要定宽和定高</div> </div> <div class="wrap02"> <div class="cont">这个内容部分可以实现自适应</div> </div> </body>
二、视口垂直居中 + translate
- 1vh表示视口高度的1%, 1vw表示视口的宽度的1%
- 当宽度 小于 < 高度时，1vmin = 1vm, 否则 1vmin = 1vh
- 当宽度 大于 > 高度时, 1vmax = 1vm，否则 1vmax = 1vh;
- 内容部分必须要固定宽和高
- 示例代码：
<head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ width: 18em; background: lightgreen; padding: 1em 1.5em; margin: 50vh auto 0; transform: translateY(-50%); } </style> </head> <body> <div class="wrap"> 这个只能做到视口居中 </div> </body>
三、FlexBox
- 在flexbox时，用margin:auto可以实现水平和垂直居中，可以用 margin:0 auto设置水平居中；margin: auto 0设置垂直居中
- 被居中元素的宽度和高度可以自适应
- 也可以通过flex的align-items和justify-content来实现水平垂直居中
- 示例代码：
<head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap01{ display: flex; min-height: 10vh; border: 1px solid gray; width: 30vw; } .wrap01 .main{ margin: auto; padding: 5px; background: lightblue; } .wrap02{ margin-top: 10px; width: 28em; height: 10em; display: flex; align-items: center; justify-content: center; background: lightblue; } </style> </head> <body> <div class="wrap01"> <div class="main"> flex + margin:auto实现垂直居中 </div> </div> <div class="wrap02"> flex的align-items(垂直对齐)和justify-content(水平对齐)<br/>实现垂直水平居中 </div> </body>
四、总结
经过上述介绍，我们发现各垂直居中的方式应用场景是有所不同的。
- absolute + translate 和 flexbox可以实现内容部分宽高自应用；
- absolute + calc 和 视口垂直居中，内容部分是需要固定宽高的；
- 不同场景选择没的垂直居中方式很重要。