垂直居中的方法

1.利用position和margin设置为负的

利用其中的position：absolute; top:50%; 其中的margin-top:-(高度)/2；

【这里分为两种情况其中的孩子节点的高度设置为px，或者是将其中的高度设置为其中的百分比】

 

2：利用position和transform

将其中的孩子节点:position:absolute; top:50%;

将其中的孩子节点的transform:translate(0,-50%);

 

3.利用position和margin:auto

对其中的孩子节点设置：position:absolute; top:0;bottom:0

设置margin:auto

 

 

4.利用padding

假如其中的父节点的高度为：300px 我们给其中的设置padding:100px 0;

给其中的孩子节点的高度设置为100px；

 

5.利用flex进行布局：

1》将其中的元素设置为display:flex; align-items:center; 【对其中的行内元素和块级元素都是适用的】align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

2》将其中父亲元素的主轴的方向进行转变[flex-direction:column;]，然后利用其中的justify-content:center；

 

其中的justify是水平方向上的，其中的align是垂直方向上的

 

6.设置一个基准元素：

<div>

<div id="one"></div>

<div></div>

</div>

对其中的基准元素height:50%;

对其中的非基准元素还要设置其中的margin-top:-(高度/2);

 

7.对于其中的图片的实现其中的垂直居中：

对其中的父盒子：height:100px;line-height：100px;

将其中的vertical-align:middle;就可以了

 

8.利用display:table;和display:table-cell; vertical-align:middle;将其中的设置为其中的垂直居中就可以了

 

 

9.对于文字的line-height来进行垂直方向的居中