另一個div中間對齊的div

Question

我正在嘗試使用div進行布局，該div的中間有一些文本，下面是該文本以及4個社交媒體圖標。 所以我做了一個div，里面有另一個div，但是我不能將最后一個div垂直居中...

那么，如何在div“ section10”的中間居中div“ sec10_content”？

我知道這個問題已經被問過了，但是我無法管理我的代碼...

這是代碼：

HTML：

<div class="section10">
            <div class="sec10_content">
            </div>
        </div>

CSS：

.section10
{
    width:100%;
    height:320px;
    vertical-align: middle;
    background-color:#222222;
}
.sec10_content
{
    width: 50%;
    height: 100px;
    margin: auto;
    border: 1px solid white;
}

Answer 1

我認為添加顯示inline-flex是可行的。

.section10
{
    width:100%;
    height:320px;
    vertical-align: middle;
    background-color:#222222;
    display: inline-flex;
}

Answer 2

我喜歡的方式是在內部div上添加這3行CSS

 position: relative;
 top: 50%;
 transform: translateY(-50%);

參見JSFiddle 。 資料來源：http: //zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/