Question

<div id="wrapper" style="height:400px;width:400px;">
 <div id="example">
  Text
 </div>
</div>

我正在寻找一种方法让#example进入#wrapper的中心（左，右，上，下）。

Answer 1

我认为有多种方法可以达到你想要的效果。一个是：

#wrapper{
    display:table-cell;
    width:400px;
    height:400px;
    vertical-align:middle;
    border:1px solid red;
}
#example{
    width:200px;
    margin:auto;
    text-align:center;
    background:blue;
}

演示：http://jsfiddle.net/SsD4Q/3/

我希望有所帮助！

Answer 2

尝试提供#example margin: 0 auto;

第二个属性是左/右边距。汽车应该以它为中心。

编辑：抱歉这不是垂直居中。我误解了。有关垂直居中的信息，请参阅http://www.jakpsatweb.cz/css/css-vertical-center-solution.html。

Answer 3

垂直对齐是一个棘手的问题，除非您使用表格。

我建议你在居中元素上阅读这个aritcle。 http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

水平对齐很容易......

指定宽度并使用保证金：自动

#example {width:100px; margin: 0 auto;}

Answer 4

<div id="wrapper" style="height:400px;weight:400px;">
  <div id="vertical" style="height: 50%; width: 100%; margin-top: -25px"></div>
  <div id="example" style="margin: 0 auto; height: 50px">
    Text
  </div>
  </div>

设置margin-top减去示例div的高度的一半

Answer 5

我不喜欢当前提出的解决方案......因为它们依赖于显示为表格单元格，或者使用#example上的静态高度和负边距。

以下是我的建议，考虑#wrapper有固定高度：

将#wrapper的行高设置为等于其高度;
将#wrapper的文本对齐设置为居中并垂直对齐居中;
将#example的显示设置为内嵌块，因此它在垂直和水平方向居中但仍可用作块;
改为#example为span，因此IE8允许它为内联阻止。

http://jsfiddle.net/aneves_sw/yse9w/

将文本居中放在父元素的中间

5 个答案: