在前端开发开发设计全过程中，小盒子垂直居中是经常采用的。在其中 ，垂直居中又能够分成水准垂直居中和竖直垂直居中。水准垂直居中是较为非常容易的，立即设定原素的margin: 0 auto便可以完成。可是竖直垂直居中相对性来讲是较为繁杂一些的。下边大家一起來探讨一下完成竖直垂直居中的方式。

最先，界定一个必须竖直垂直居中的div原素，他的总宽和高宽比均为300px，情况色为橘色。编码以下：

 !DOCTYPE html html lang="en" head 
 meta charset="UTF-8" 
 title index /title 
 style 
 .content {
 width: 300px;
 height: 300px;
 background: orange;
 /style /head body 
 div /div /body /html 

实际效果以下：

大家必须促使这一橘色的div垂直居中，究竟应该怎么办呢？最先大家完成水准垂直居中，上边早已提及已过，能够根据设定margin: 0 auto完成水准垂直居中，编码以下：

 !DOCTYPE html html lang="en" head 
 meta charset="UTF-8" 
 title index /title 
 style 
 .content {
 width: 300px;
 height: 300px;
 background: orange;
 margin: 0 auto;
 /style /head body 
 div /div /body /html 

实际效果以下：

非常好，早已完成水准垂直居中了！接下去该打大boss了——完成竖直垂直居中。但是，在这里以前，大家需先设定div原素的先祖原素html和body的高宽比为100%（由于她们默认设置是为0的），而且消除默认设置款式，即把margin和padding设定为0（假如不消除默认设置款式得话，访问器便会出現翻转条，聪慧的亲，自身想一想问甚么）。

 !DOCTYPE html html lang="en" head 
 meta charset="UTF-8" 
 title index /title 
 style 
 html, body {
 width: 100%;
 height: 100%;
 margin: 0; 
 padding: 0;
 .content {
 width: 300px;
 height: 300px;
 background: orange;
 margin: 0 auto; /*水准垂直居中*/
 /style /head body 
 div /div /body /html 

接下去，必须做的事儿便是要让div向下移动了。大家都了解top特性可使得原素往下偏位的。可是，因为默认设置状况下，因为position的数值static（静止不动的、不能以移动的），原素在文本文档流里是以上向下、从左往右密不可分的合理布局的，大家不能以立即根据top、left等特性更改它的偏位。因此，要想移动原素的部位，就需要把position设定为并不是static的别的值，如relative,absolute,fixed等。随后，便可以根据top、bottom、right、left等特性使它在文本文档中产生部位偏位（留意，relative不是会使原素摆脱文本文档流的，absolute和fixed则会！换句话说，relative会占有着移动以前的部位，可是absolute和fixed也不会）。设定了position: relative后的编码以下:

 !DOCTYPE html html lang="en" head 
 meta charset="UTF-8" 
 title index /title 
 style 
 html, body {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 .content {
 width: 300px;
 height: 300px;
 background: orange;
 margin: 0 auto; /*水准垂直居中*/
 position: relative; /*设定position特性*/
 /style /head body 
 div /div /body /html 

大家更新一下网页页面，发觉跟以前是沒有一切转变的，由于，大家只是是使设定了原素的position=relative罢了，可是还没有刚开始移动他的竖直偏位。好，下边大家就要它偏位吧！竖直偏位必须采用top特性，它的值能够是实际的清晰度，还可以是百成绩。由于大家如今不知道道父原素（即body）的实际高宽比，因此，不是能够根据实际清晰度来偏位的，而应当用百成绩。即然是要让它垂直居中嘛！好，那麼大家就要它的数值50%不就可以了了没有？难题确实这么简单，大家来试一下，就设定50%试一下：

 !DOCTYPE html html lang="en" head 
 meta charset="UTF-8" 
 title index /title 
 style 
 html,body {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 .content {
 width: 300px;
 height: 300px;
 background: orange;
 margin: 0 auto; /*水准垂直居中*/
 position: relative; /*摆脱文本文档流*/
 top: 50%; /*偏位*/
 /style /head body 
 div /div /body /html 

实际效果以下图所显示：

div竖直方位上边并沒有垂直居中。显著是偏下了。下边，大家在访问器正中间画一条红杠用于参照，以下图：

根据观查图中，要是让div的管理中心移动到红杠的部位，那麼全部div就垂直居中了。那如何让它管理中心移动到红杠处呢？从图上能够观查到，从div的管理中心到红杠的间距是div本身高宽比的一半。这时候候，大家可使用根据margin-top特性来设定，由于div的本身高宽比是300，因此，必须设定他的margin-top数值-150。为何是要设定成负数的呢？由于正数是往下偏位，大家是期待div往上偏位，因此应当是负数，以下：

 !DOCTYPE html html lang="en" head 
 meta charset="UTF-8" 
 title index /title 
 style 
 html,body {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 .content {
 width: 300px;
 height: 300px;
 background: orange;
 margin: 0 auto; /*水准垂直居中*/
 position: relative;
 top: 50%; /*偏位*/
 margin-top: -150px; 
 /style /head body 
 div /div /body /html 

实际效果以下：

的确早已垂直居中了。好激动！有没有？！

除开可使用margin-top把div往上偏位以外，CSS3的transform特性还可以完成这一作用，根据设定div的transform: translateY(-50%)，含意是促使div往上平移（translate）本身高宽比的一半(50%)。以下：

 !DOCTYPE html html lang="en" head 
 meta charset="UTF-8" 
 title index /title 
 style 
 html,body {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 .content {
 width: 300px;
 height: 300px;
 background: orange;
 margin: 0 auto; /*水准垂直居中*/
 position: relative;
 top: 50%; /*偏位*/
 transform: translateY(-50%);
 /style /head body 
 ：
 !DOCTYPE html html lang="en" head 
 meta charset="UTF-8" 
 title index /title 
 style 
 html,body {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 body {
 display: flex;
 align-items: center; /*界定body的原素竖直垂直居中*/
 justify-content: center; /*界定body的里的原素水准垂直居中*/
 .content {
 width: 300px;
 height: 300px;
 background: orange; 
 /style /head body 
 div /div /body /html 
实际效果：
除开上边3我国法以外，自然将会还存有很多的能够完成竖直垂直居中的方式。例如能够将父器皿设定为display:table ，随后将子原素也便是要竖直垂直居中显示信息的原素设定为 display:table-cell 。可是，它是不值得得强烈推荐的，由于会毁坏总体的合理布局。假如用table合理布局，那麼为何不立即应用table标识了？那不更为便捷吗？
有关CSS完成竖直垂直居中的方式，就写那么多了。假如，发觉哪儿写的错误的或是有更强的方式的，请在评价明确提出来，那样大伙儿能够一起探讨、相互发展！
CSS2的vertical-align垂直居中方式
近期，看过张鑫旭教师的《CSS全球》一书，不选用CSS3，只是应用了CSS2的vertical-align，根据一些黑高新科技方式完成了竖直垂直居中，有兴趣爱好的同学们能够科学研究一下。实际完成以下：
假定类名是.dialog，则 HTML 以下：
 div div /div /div 
关键 CSS 编码以下：
.container {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: rgba(0,0,0,.5);
 text-align: center;
 font-size: 0;
 white-space: nowrap;
 overflow: auto;
}.container:after {
 content: 
 display: inline-block;
 height: 100%;
 vertical-align: middle;
}.dialog {
 display: inline-block;
 vertical-align: middle;
 text-align: left;
 font-size: 14px;
 white-space: normal;
}