Div在另一个div的中间对齐

时间:2014-11-02 22:31:29

标签: html css

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

那么,我该如何将div" sec10_content"在div" section10"?

的中间

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

以下是代码:

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;
}

2 个答案:

答案 0 :(得分:3)

我认为添加display inline-flex会起作用。

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

答案 1 :(得分:1)

我喜欢的方法是在内部div上添加这3行css

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

JSFiddle。 资料来源:http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/