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影响第二轴。

所有的说法和完成，你将父元素变成一个柔性容器，并告诉它垂直和水平居中子元素。

确保您将宽度和高度应用于所有相关元素，并且您处于业务中！