css中的動態填充

Question

鑑於我有一個外部和innner div，其中外部div的大小是固定的（邊界大小），但內部div的大小未知。 有沒有辦法給外部div的填充，所以內部div在中心？ （使用CSS/SCSS）

<div class="outer"> 
    <div class="inner"> 
    </div> 
</div> 

.outer { 
    width: 50; 
    height: 40; 
    ... 
} 
.inner { 
    width: ? // <50 
    width: ? // <40 
} 

Answer 1

使用顯示：彎曲的外格

檢查了這一點：

.outer { 
 
    width: 500px; 
 
    height: 400px; 
 
    background:yellow; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.inner { 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    Hey There I am at centre. 
 
    </div> 
 
</div>

希望它能幫助:)

Answer 2

爲了獲得簡單可靠的結果，您需要使用彈性盒。使用下面的父元素：

display: flex 

如果你的目標是中心的元素，垂直和水平的父元素中，您將適用以下規則父元素，以及：

justify-content: center; 
align-items: center; 

爲什麼這兩個附加屬性？

一個以橫軸爲中心，另一個以縱軸爲中心。默認情況下，flex容器（父元素）將元素視爲一行，因此主軸是水平的。一排。

justify-content影響主軸。

align-items影響第二軸。

所有的說法和完成，你將父元素變成一個柔性容器，並告訴它垂直和水平居中子元素。

確保您將寬度和高度應用於所有相關元素，並且您處於業務中！