使用显示器flex居中显示多个项目

Question

我想用居中显示居中页面的绝对中心div：center和align-items：center，但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/