使用显示弹性居中多个项目

Question

我想在页面的绝对中心将div居中，内容为中心：中心和对齐项目：中心，但div需要是页面的100%宽度和高度才能处于绝对中心。

当您在div 的顶部或底部添加元素时，问题就出现了，这会降低我们要居中的div 的高度，并且不再位于绝对中心。

这是页面 https://jsfiddle.net/nybf8tjc/1 我可以添加

.typewriter{margin-top: -41px;}

解决这个问题，但我觉得必须有更好的方法来做到这一点。

Answer 1

您可以.typewriter设置为绝对定位的元素，并添加用于居中的常用设置，例如

.typewriter {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
etc.
}

在行动：https://jsfiddle.net/de3rf65j/

Answer 2

您可以使用它轻松实现它。

div.father {
width: 100vw;
height: 100vw;

position: absolute;

display: flex;
align-items: center;
justify-content: space-around;
}

div.father div.child {
width: 400px;
height: 250px;

background-color: teal;

position: relative;
}

<div class="father">
<div class="child"></div> 
</div>

您也可以使用transform属性：

div.child {
width: 400px;
height: 250px;

margin:0;
padding: 0;


background-color: teal;

position: absolute;
top: 50%;
left: 50%;

transform: translate(-50%, -50%);
}

这应该使您想要的容器居中。 看看 https://css-tricks.com/snippets/css/a-guide-to-flexbox/