Question

我在Stackoverflow上搜索过很多帖子，但我没有找到解决方案。

我尝试使用margin：auto;

垂直对齐文字

如果您想查看此示例，似乎存在边缘折叠问题：

// HTML
<div class="outer">
    <div class="inner">Hello</div>
</div>

<div class="outer2">
    <div class="inner">Trying to center this text vertically</div>
</div>

// CSS
.inner {
    margin: auto 0;
    height: 20px;
    color: white;
}
.outer {
    background-color: red;
}
.outer2 {
    background-color: blue;
    height: 200px;
}

If you want to play on my code, click here

Answer 1

我不相信这是一个使用margin: auto 0垂直对齐内容的好方法，就像你设置它一样。要使inner div垂直居中，通过修改.inner，这是一种简单的方法：

.inner {
    height: 200px;
    color: white;
    line-height: 200px;
}

Answer 2

显示器具有魔力。显示：内部和显示器上的表格单元格：外部div上的表格。最后在内部div上放置vertical-align：middle或者你想要的任何位置。

    .inner {
        display: table-cell;
        vertical-align: middle;
        height: 20px;
        color: white;
    }
    .outer2 {
        text-align: center;
        background-color: blue;
        height: 200px;
        display: table;
        width: 100%;
    }

Answer 3

我建议你使用flexbox 将此添加到outer2类

.outer2 {
    background-color: blue;
    height: 200px;
    display:flex;
    align-items:center;
}

对于水平对齐，您可以使用justify-content:center align-item:center会垂直对齐div中心的项目

Answer 4

.outer2 {
    display: flex;
    justify-content: center, left;
    background-color: blue;
    height: 200px;
}

Answer 5

你试图通过给予margin：auto来对齐整个内部div。如果要对齐文本，可以使用text-align：center。如果您需要对齐整个div，请提及内部div的高度和宽度。我已经发布了小提琴链接，请检查

http://jsfiddle.net/ajaycoder/n1rz0bts/4/

.inner {
    margin: auto ;

    color: white;
    width:50%;
    border: solid 1px red;
    height:50%;
}

CSS保证金使用保证金折叠：auto;

5 个答案: