php垂直居中,css中有哪些方法可以实现垂直居中

css实现垂直居中的方法如下：

1、利用line-height实现居中，这种方法适合纯文字类的；

.parents {

height: 400px;

line-height: 400px;

width: 400px;

border: 1px solid red;

text-align: center;

}

.child {

background-color: blue;

color: #fff;

}

css布局,实现垂直居中

效果：

(推荐教程：CSS教程)

2、通过设置父容器相对定位，子级设置绝对定位，标签通过margin实现自适应居中；

.parents {

height: 400px;

width: 400px;

border: 1px solid red;

position: relative;

}

.child {

width: 200px;

height: 100px;

line-height: 100px;

text-align: center;

color: #fff;

background-color: blue;

/* 四个方向设置为0, 然后通过margin为auto自适应居中 */

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}

css布局,实现垂直居中

效果：

3、弹性布局flex 父级设置display: flex; 子级设置margin为auto实现自适应居中；

.parents {

height: 400px;

width: 400px;

border: 1px solid red;

display: flex;

}

.child {

width: 200px;

height: 100px;

line-height: 100px;

text-align: center;

color: #333;

background-color: yellow;

margin: auto;

}

css布局,实现垂直居中

效果：

4、父级设置相对定位，子级设置绝对定位，并且通过位移transform实现；

.parents {

height: 400px;

width: 400px;

border: 1px solid red;

position: relative;

}

.child {

width: 200px;

height: 100px;

line-height: 100px;

text-align: center;

color: #fff;

background-color: green;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

css布局,实现垂直居中

效果：

5、父级设置弹性盒子，并设置弹性盒子相关属性；

.parents {

height: 400px;

width: 400px;

border: 1px solid red;

display: flex;

justify-content: center; /* 水平 */

align-items: center; /* 垂直 */

}

.child {

width: 200px;

height: 100px;

color: black;

background-color: orange;

}

效果：

6、网格布局，父级通过转换成表格形式，然后子级设置行内或行内块实现。(需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素)。

效果：

.parents {

height: 400px;

width: 400px;

border: 1px solid red;

display: table-cell;

text-align: center;

vertical-align: middle;

}

.child {

width: 200px;

height: 100px;

color: #fff;

background-color: blue;

display: inline-block; /* 子元素设置行内或行内块 */

}

相关视频教程推荐：css视频教程