請問一下，如何讓一個div塊垂直居中在頁面上，且不限定div的寬度和高度？
10 回答
qq_啊啦嘞_0
TA貢獻8條經(jīng)驗 獲得超50個贊
只使用css就可以實現(xiàn)任意寬度、任意高度的元素垂直居中、水平和垂直都居中。
1）垂直居中。
<!DOCTYPE html>
<html>
? <head>
? ? ?<meta charset="UTF-8">
? ? ?<title>CSS3實現(xiàn)陰影效果</title>
? ? ?<style>
? ? ? ? .div1{position:absolute;top:50%;bottom:50%;}
? ? ?</style>
? </head>
? <body>
? ? ? ? <div class="div1">1</div>
? </body>
</html>
2）垂直水平都居中。
<!DOCTYPE html>
<html>
? <head>
? ? ?<meta charset="UTF-8">
? ? ?<title>CSS3實現(xiàn)陰影效果</title>
? ? ?<style>
? ? ? ? .div1{position:absolute;top:50%;left:50%;right:50%;bottom:50%;}
? ? ?</style>
? </head>
? <body>
? ? ? ? <div class="div1">1</div>
? </body>
</html>
登陸異常
TA貢獻3條經(jīng)驗 獲得超2個贊
.dis_vm{?width:0;?height:100%;?display:?inline-block;?vertical-align:?middle;}要居中的div設置vertical-align: middle;
然后再后面添加一個新的div添加上面的樣式
Joy_Sang
TA貢獻64條經(jīng)驗 獲得超13個贊
.container?{
?????width:?400px;
?????height:?500px;
?????background:?#ccc;
?????position:?relative;
}
.child?{
????background:?red;
????position:?absolute;
????top:?50%;
????left:?50%;
????transform:?translate(-50%,?-50%);
}
KevenHuang
TA貢獻280條經(jīng)驗 獲得超233個贊
可以用一個一行一列的table來實現(xiàn)，不過要先給body和table的高設置為100%，利用table中每行的元素都默認為垂直居中的特性實現(xiàn)元素垂直居中。
添加回答
舉報
0/150
提交
取消