html5相对位置居中,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布局,实现垂直居中

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; /* 子元素设置行内或行内块 */

}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。