html调整垂直居中,html元素垂直居中的几种方法

元素的垂直居中

#page{

width: 100%;

text-align: center;

color:white;

}

#hd{

height: 20px;

background: rgba(26, 128, 0, 0.6);

padding: 15px 15px 50px 15px;

}

#bd{

height: 800px;

background: #f1f1f1;

}

#ft{

background: #414128;

height:80px;

padding :20px;

text-align: left;

}

#bd>div{

width: 100%;

height: 100px;

color: white;

border: 3px solid white;

}

.main1 {

background:#39c;

display: table;

}

.cell{

display: table-cell;

vertical-align: middle;

}

.main2{

background: #516f7e;

position: relative;

}

.content2{

position: absolute;

top: 50%;

height: 50px;

margin-top: -25px;

border: 2px solid red;

line-height: 50px;

left: 0;

right: 0;

}

.main3 {

background: #234251;

}

.nullMeta{

height: 50%;

}

.content3{

height: 50px;

margin-top: -25px;

border: 2px solid red;

line-height: 50px;

}

.main4 {

background: #3a3d3f;

position: relative;

}

.content4{

height: 50px;

width: 80%;

position: absolute;

top:0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

border: 2px solid red;

line-height: 50px;

}

.main5 {

background: #445123;

line-height: 100px;

}

.main6 {

background: #0c5273;

position: relative;

}

.content6{

position: absolute;

top: 50%;

height: 50px;

width: 97%;

line-height: 50px;

left: 50%;

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

border: 2px solid red;

}

.main7 {

background: #0c733a;

}

.content7{

height: 100px;

display: flex;

align-items: center;

justify-content: center;

}

这里是一些关于元素垂直对齐的一些方法以及demo

这里是容器一，用父元素的 display:table;子元素的display:table-cell;verticel-align:middle; 实现垂直居中。

这里是容器二，父元素用 position: relative;，子元素的display:position: absolute;top: 50%;height: 50px;margin-top: -25px; 实现红色边线内部部分的垂直居中。

这里是一个空标签

这里是容器三，用一个空的标签占位height:50%，子元素用margin-top:-25px;进行回补，实际元素高度50px;实现垂直居中。

这里是容器四，用父元素的 display:relative;直接采用position:absolute;top:0;left:0;right:0;bottom:0;margin:auto来实现水平以及垂直居中。

这里是容器五，其实对于内容的垂直居中，上面都使用了line-height来实现文本的垂直居中。

这里是容器六，用css3来实现垂直居中，子元素采用了绝对定位后再left，top50%，再用css3的transform属性用translate(-50%,-50%)来补回原来的自身的高度差实现垂直居中。

这里是容器七，用css3来实现垂直居中以及水平居中，用css3display: flex;实现设置属性值：align-items: center;justify-content: center;。来实现垂直与水平的居中。

 总结下：其实实现垂直居中只有一下几种思路：

1：对于最简单的纯文本的居中height值与line-height设置为一样即可。

2：对于最普通的垂直居中采用绝对定位后设置left：50%；与bottom：50%后再采用各种方式去实现自身高度差的补回。

3：对于普通的元素对齐还可以采用绝对定位后left:0;right:0;top:0;bottom:0;在此基础之上就可以采用margin:auto;实现对齐了。

4：用css3的Flexbox属性