塊級元素的三種垂直水平居中的方法
發(fā)布時間：2019-05-08 15:11:00 作者：蘇小貓 
我要評論
我要評論這篇文章主要介紹了塊級元素的三種垂直水平居中的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
直奔主題在這里提供三種塊級元素垂直水平居中的方法
- flex（子級寬高可固定也可不固定，隨意）
- 定位+margin（固定子級的寬高，margin-top,margin-left取自身一半的負值）
- 定位+transform（不固定子級的寬高）
flex
html
<div class="parent">
<div class="child"></div>
</div>
css
.parent{
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid gainsboro;
display: flex;
justify-content: center;
align-items: center;
}
.child{
width: 200px;
height: 200px;
background: red;
}
定位+margin
html
<div class="parent">
<div class="child"></div>
</div>
css
.parent{
position: relative;
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid gainsboro;
}
.child{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
background: red;
}
定位+transform
html
<div class="parent">
<div class="child">
<span>我是子元素</span>
</div>
</div>
css
.parent{
position: relative;
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid gainsboro;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: red;
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
- 本文通過具體實例給大家詳細介紹了CSS行內(nèi)元素和塊級元素的居中的實現(xiàn)方法，非常簡單實用，推薦給大家，希望大家能夠喜歡。2015-03-17
- block level的元素的寬度默認等于父元素的寬度，這樣的話內(nèi)容將從黃色左邊界開始顯示. 且設置text-align: center; 只能將文字居中而無法將背景圖片居中且顯示在文字的左邊2013-12-11
在IE下，當margin:0 auto;無法使得塊級元素水平居中時
在IE下，當margin:0 auto;無法使得塊級元素水平居中時的解決方法2009-11-11