讓一個小的div在大的div中居中顯示


原文

實現原理是設置margin自動適應,然后設置定位的上下左右都為0。

就如四邊均衡受力從而實現盒子的居中:

代碼:

.parent {
width:800px;
height:500px;
border:2px solid #000;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.child {
width:200px;
height:200px;
display:inline-block;
background-color: red;
}

擴展資料

div+css絕對定位

使用通常是父級定義position:relative定位

子級定義position:absolute絕對定位屬性,並且子級使用left或right和top或bottom進行絕對定位。

.divcss5{position:relative} 定義,通常最好再定義CSS寬度和CSS高度
.divcss5-a{position:absolute;left:10px;top:10px} 這里定義了距離父級左側距離間距為10px,距離父級上邊距離為10px
參考資料

百度百科-div css

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM