CSS/html各種div 等元素居中的幾種方法
阿新 • • 發佈:2019-01-09
元素居中這個樣式真是有相當多的頁面都在使用,在這裡,跟大家分享幾種好用的居中方法
1、 控制margin - - - - - -margin:0 auto;
#d1{
width:500px;
height:300px;
margin:0 auto;
}
!注意,這個要求居中元素必須是塊級元素,且必須設定寬,否則無效;
2、利用text-align - - - - - -text-align: center; (推薦)
#d2{ text-align: center; } #d2>div{ display: inline-block; width:300px; height:100px; background: #aff; } !注意,這個設定是要居中的元素為行內塊元素,只需要加一個父元素並給其設定文字居中即可,這個相對萬能一些,而且沒有相容性問題,個人也最喜歡用這個;
3、CSS3 過渡屬性 transform - - - - - -transform: translate(-50%);
CSS3 位移 #d3{ position: fixed; top:30%; left:50%; transform: translate(-50%); width:300px; height:100px; background: #B948FF; } 元素先向左移動父元素寬的50%,後以自身為主,沿X軸向右移動自身的寬度的50%,正好居中 (IE 10 以下不支援此屬性)
實用程式碼展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素居中</title>
<style>
#d1{
width:300px;
height:100px;
background: #f0f;
margin:20px auto;
}
#d2{
text-align : center;
}
#d2>div{
display: inline-block;
width:300px;
height:100px;
background: #aff;
}
#d3{
position: fixed;
top:60%;
left:50%;
transform: translate(-50%);
width:300px;
height:100px;
background: #B948FF;
}
#d4{
width: 800px;
height:200px;
border: 2px solid #000;
}
#d4>div{
position: relative;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width:300px;
height:100px;
background: #FFC615;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2">
<div></div>
</div>
<div id="d3"></div>
<div id="d4" style="">
<div></div>
</div>
</body>
</html>