CSS中居中布局是網頁開發者常常需要面對的問題,本文將介紹如何使用CSS將兩個div居中。
<div class="parent"> <div class="child-1"></div> <div class="child-2"></div> </div>
首先我們需要在CSS代碼中定義父元素的寬度和高度,并設置它的position屬性為relative,然后再將子元素的position屬性設置為absolute,并使用left和top屬性將它們都移動到父元素的中心位置。
.parent { width: 60%; height: 400px; position: relative; } .child-1 { width: 200px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .child-2 { width: 150px; height: 150px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
以上代碼可以將兩個div都居中,其中translate(-50%, -50%)是用來讓元素以它們自身的中心點為基準而不是左上角為基準進行移動,這樣可以達到居中的效果。
總之,在CSS中實現居中布局需要使用position屬性、left、top屬性和transform屬性,其中transform屬性中的translate函數可以讓元素以自身中心點為基準進行移動,從而達到居中的效果。
上一篇mysql 覆蓋恢復
下一篇jsp css使用方法