html fixed垂直居中,前端垂直居中的几种简单实现

在前端开发尤其是web开发中会经常调整元素位置，所以经常会遇到居中问题，对于水平居中我们都知道用简单的text-align:center;就可以实现，但是对于垂直居中却并不是那么简单实现的，往往需要多条代码合作才能实现其效果。

本文简单介绍几种垂直居中的方式，技术不高，水平有限，仅供参考。

1. 不知道自己高度和父元素高度时，只要�使用绝对定位就可以实现

以下代码没有插图的都是实现的效果相同，如图所示：

image.png

当一个父元素没有明确限制高度，而只是靠着内部元素的高度撑起来其高度时，我们又要在该父元素中设置一个居中的框框就可以采取这种方式：

// html代码

enter

enter

enter

enter

enter

enter

enter

enter

enter

enter

//css代码

.parent-element-absolute {

width: 800px;

text-align: left;

background-color: white;

position: relative;

}

.child-element-absolute {

width: 450px;

height: 100px;

background-color: gray;

position: absolute;

top: 50%;

left: 50%;

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

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

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

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

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

}

2. 在父元素下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可

该必须条件为该父元素下只有一个子元素。其html代码与上类似。

// css

.parent-element-relative {

width: 800px;

height: 250px;

text-align: left;

background-color: white;

position: relative;

}

.child-element-relative {

width: 450px;

height: 100px;

background-color: gray;

position: relative;

top: 50%;

left: 50%;

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

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

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

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

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

}

3. flex布局设置垂直居中

.parent-element-flex {

width: 800px;

height: 250px;

background-color: white;

display: flex;

display: -webkit-flex;

align-items: center;

}

.child-element-flex {

width: 450px;

height: 100px;

background-color: gray;

margin: 0 auto;

}

4. table-cell设置垂直居中

.parent-element-table-cell {

width: 800px;

height: 250px;

background-color: white;

display: table-cell;

text-align: center;

vertical-align: middle;

}

.child-element-table-cell {

width: 450px;

height: 100px;

background-color: gray;

margin: 0 auto;

}

5. -webkit-box属性设置垂直居中

.parent-element-webkit-box{

width: 800px;

height: 250px;

background-color: white;

display: -webkit-box;

-webkit-webkit-box-pack: enter;

-moz-webkit-box-pack: enter;

-ms-webkit-box-pack: enter;

-o-webkit-box-pack: enter;

-khtml-webkit-box-pack: enter;

webkit-box-pack: enter;

-webkit-box-align: center;

}

.child-element-webkit-box{

width: 450px;

height: 100px;

background-color: gray;

margin:0 auto;

}

6. line-height实现文字居中

//html

andy

//css

.parent-element-line-height {

width: 800px;

height: 250px;

background-color: white;

line-height: 250px;

text-align: center;

vertical-align: middle;

}

7. fixed设置窗口整体居中

.parent-element-fixed{

width: 600px;

height: 250px;

background-color: lightgrey;

position: fixed;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

line-height: 250px;

vertical-align: middle;

}