<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子水平垂直居中方法</title>
<style>
*{padding: 0; margin: 0; list-style: none;}
.box01{width: 200px; height: 200px; background:blue; color:#fff;
position:absolute;
left: 50%; top: 50%;
margin-left: -100px;
margin-top: -100px;
}
.box02{background:#f10180; color:#fff; font-size:30px; padding: 20px;
position:absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box01">已知知宽高的小水平垂直都居中盒子</div>
<div class="box02">未知宽高的小盒子水平垂直都居中</div>
</body>
</html>點(diǎn)擊查看更多內(nèi)容
11人點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦