整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
相信很多人都知道怎樣讓一個已知寬高的盒子在瀏覽器水平和垂直都居中，那么如何讓一個未知寬高的盒子水平和垂直都居中呢？
設(shè)置已知寬高的盒子水平和垂直都居中的方式，只需要設(shè)置盒子絕對定位的坐標是50%，然后再通過margin給負的一半寬度和高度即可實現(xiàn)。
代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>水平和垂直居中方式</title>
<style>
.box{width:400px; height:200px; background:pink;}
.box{
position:absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="box">已知寬高的盒子水平和垂直居中</div>
</body>
</html>
現(xiàn)在來看看如何讓一個未知寬高的盒子在瀏覽器水平和垂直都居中，先來了解下css3轉(zhuǎn)換模塊的transform:translate(x,y);位移屬性。
觀察以下代碼，第一個盒子為位移盒子的參照物，第二第三個盒子分別設(shè)置了位移的水平方向為不同的百分比的值。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子水平垂直居中方法</title>
<style>
*{padding: 0; margin: 0; list-style: none;}
.sport{width: 400px; line-height: 30px; background:#f10180; color:#fff; margin-left: 500px;}
.canzhao{background:blue; transform:translate(0,0);}
.weiyi01{ transform:translate(-50%,0);}
.weiyi02{ transform:translate(-100%,0); background:purple;}
</style>
</head>
<body>
<div class="sport canzhao">寬度400px盒 transform:translate(0,0);</div>
<div class="sport weiyi01">寬度400px盒 transform:translate(-50%,0);</div>
<div class="sport weiyi02">寬度400px盒 transform:translate(-100%,0);</div>
</body>
</html>
顯示效果如圖：
通過上面代碼和效果，可以得到一個結(jié)論：transform:translate(x,y); 如果 x 和 y 的值是百分比，則位移距離的參照物是自身元素的寬度和高度。
那么通過上面的結(jié)論，就可以讓一個未知寬高的盒子實現(xiàn)水平和垂直都居中了，設(shè)置元素絕對定位和定位坐標值為50%后，只需要設(shè)置盒子水平和垂直方向位移的值都是-50%即可。
代碼如下：
<!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>
效果對比如圖：
需要注意的問題是現(xiàn)在css3屬性在低版本瀏覽器是存在兼容性為問題的，如果是一些移動端項目或者是一些不要求兼容低版本瀏覽器的項目可以使用此方法對盒子進行居中。
皮皮蝦，我們走——bbs.520it.com
通常首選方法是使用flexbox居中內(nèi)容。只需三行代碼即可：display:flex，然后使用 align-items:center 和 justify-content:center 將子元素垂直和水平居中。
如下代碼：
html：
<div class="flexbox-centering">
<div>Centered content.</div>
</div>css：
.flexbox-centering {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}使用grid(網(wǎng)格)與flexbox非常相似，也是一種常見的技術(shù)，尤其是布局中已經(jīng)使用網(wǎng)格的情況下。與前一種flexbox技術(shù)的唯一區(qū)別是它顯示為柵格。
如下代碼：
html:
<div class="grid-centering">
<div class="child">Centered content.</div>
</div>css:
、盒子里的字，默認是位于盒子內(nèi)的左上角，如何讓它水平居中，垂直居中呢。
圖1
圖2
以下是我在vscode下做的代碼：
圖3
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
