Question

鉴于我有一个外部和内在的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

使用display：flex in outer div

检查一下：

.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 会影响辅助轴。

所有说完，你将父元素转换为 flex容器并告诉它将子元素垂直和水平居中。

确保您将宽度和高度应用于所有相关元素，并且您已经开始营业了！

css中的动态填充

2 个答案: