使用顯示器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/