second 廣泛 技術分享 bottom 邊距 垂直 eight 代碼 spl

一、已知塊級元素的寬高,可以通過絕對定位+具體外邊距來調整、

思路：子元素寬高已知，絕對定位top:50%,left:50%,此時,效果如圖

設定的top:50%,left:50%，是針對於子元素的左上角,所以再利用外邊距調整，將子元素的margin-top:調整為其-高度的一半,即(-height/2),margin-left同理，則實現了垂直居中

----------------代碼-----------------

html:

<div class="top"> <div class="second"></div> </div>

css:

.top { width: 200px; height: 300px; ">#16a085; position: relative; } .second { width: 100px; height: 50px; background-color: ">#bdc3c7; position: absolute; top: 50%; left: 50%; } 二、利用flex布局 思路：將父元素的display：flex,子元素margin:auto ----------------代碼----------------- html: <div class="top"> <div class="second"></div> </div> css: /*只列出關鍵代碼*/ top{ display:flex; } .second{ margin:auto; } 此種方式簡單便捷，適用場景廣泛，但使用時要註意瀏覽器是否支持flex布局 三、使用絕對定位+css3中的transform的translate 思路：其實與第一種絕對定位+外邊距的方式思路相同，但不需要知道元素的具體寬度和高度，同時使用時要註意瀏覽器的兼容性 ----------------代碼----------------- html: <div class="top"> <div class="second"></div> </div> css: .top { width: 200px; height: 300px; ">#16a085; position: relative; } .second { width: 100px; height: 50px; ">#bdc3c7; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) } 四、已知元素寬高，使用絕對定位設置其距離父元素的top,right,left,bottom都為0，再設置margin:auto，即可實現垂直居中

塊級元素的垂直居中