元素的垂直居中
#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属性