如何用CSS實現父級div中兩個子div的水平垂直居中疊放？

如何在一個父級div中實現兩個子div的水平垂直居中疊放？本文將詳細講解如何使用css技巧，在一個父級div容器內，將兩個大小不同的子div元素實現重疊，并使其在父級div中水平和垂直居中顯示。 關鍵在于，子div不能超出父div邊界，且父div外觀保持不變。

我們假設較小的div位于較大的div之上。 實現的關鍵在于巧妙運用css定位屬性。

首先，創建一個父級div（例如，class名為.box），設置其寬度、高度、邊框和margin屬性，使其在頁面居中顯示。 至關重要的是，將父級div的position屬性設置為relative，以便子元素可以使用絕對定位。

接下來，兩個子div（例如，class名為.inner1和.inner2）都需要設置position: absolute;。 這允許我們使用left: 0; top: 0; right: 0; bottom: 0; 以及 margin: auto; 將它們在父級div中水平和垂直居中。 margin: auto; 在絕對定位下依然有效，輔助實現居中效果。 通過設置不同的寬度、高度和背景顏色，可以區分這兩個div，較大的div（.inner1）位于底部，較小的div（.inner2）位于頂部，從而實現重疊效果。

以下代碼演示了具體的實現方法：

立即學習“前端免費學習筆記（深入）”；

<div class="box">   <div class="inner1"></div>   <div class="inner2"></div> </div>

.box {   width: 500px;   height: 500px;   border: 5px solid red;   margin: 100px auto;   position: relative; }  .inner1, .inner2 {   position: absolute;   left: 0;   top: 0;   right: 0;   bottom: 0;   margin: auto;   width: 200px;   height: 200px;   background: blue; }  .inner1 {   width: 400px;   height: 400px;   background: yellow; }

這段CSS代碼確保兩個子div在父div內水平垂直居中并重疊，且不會影響父div的樣式和布局。

以上就是如何用CSS實現父級div中兩個子div的水平