Question

我正在尝试制作一个带有div的布局，其中间有一些文本，并且低于该文本，4个社交媒体图标。所以我在里面用另一个div做了一个div，但我不能垂直居中最后一个div ...

那么，我该如何将div＆＃34; sec10_content＆＃34;在div＆＃34; section10＆＃34;？

的中间

我知道之前已经问过这个问题，但我无法在我的案例中管理代码...

以下是代码：

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

我认为添加display 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/

Div在另一个div的中间对齐

2 个答案: