|
在这儿为大众介绍几种html css实现垂直居中的办法。
话不多说，直接上码。
1，position:absolute。
协同position：relative运用，有两种定位办法，适用场景亦区别。
.one{
position: relative;
}
one .content_1{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
bac公斤round:red;
}
这种办法基本浏览器都能够兼容，不足之处便是必须固定宽高
.one .content_2{
position:absolute;
width:140px;
height:140px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
bac公斤round:black;
}
这种办法不必须固定高宽，可是IE低版本（IE8及以下吧，感兴趣的伴侣能够去测试一下）就不太兼容了。
2，运用position:fixed,一样设置left、top、margin-left、margin-top的属性
跟第1个办法差不多，亦是两种实现
.two_1{
position:fixed;
width:180px;
height:180px;
top:50%;
left:50%;
margin-top:-90px;
margin-left:-90px;
bac公斤round:orange;
}
.two_2{
position:fixed;
width:160px;
height:160px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
bac公斤round:pink;
}
大众都晓得的position:fixed,IE是不支持这个属性的
3，利用display:table-cell属性使内容垂直居中,用于多行文字,行内元素居中,IE6/7不支持
.three{
display: table-cell;
width: 550px;
height: 300px;
color: #069;
font-size: 14px;
vertical-align: middle;
bac公斤round: pink;
white-space:normal;
word-break:break-all;
word-wrap:break-word;
}
.five .three{
display: inline-block;
font-size: 14px;
vertical-align: middle;
}
在测试多行文字遇到一个平常的坑，百度：英文字符的换行问题。
4，最简单的一种使行内元素居中的办法，运用line-height属性
.four{
width:100px;
height:100px;
line-height:100px;
text-align:center;
bac公斤round:gray;
}
这种办法亦很实用，例如使文字垂直居中对齐
5，运用css3的display:-webkit-box属性，再设置-webkit-box-pack:center/-webkit-box-align:center。
.five{
width:90px;
height:90px;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
bac公斤round:yellow;
color:black;
}
6，运用css3的新属性transform:translate(x,y)属性
.six{
position:absolute;
width:80px;
height:80px;
top:50%;
left:50%;
transform:translate(-50%
| 
发表于 2024-6-30 05:24:42
