中心元素到页面中间水平CSS

Question

我想知道如何将元素水平居中到页面中间。

这是我的代码：

#item {
    height:400px;
    width:700px;
    background-color:white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

我想把它集中在一起，所以看起来像这样：

（水平居中，标题下方几个像素）

谢谢，M4DNE55

Answer 1

只需添加这些

即可

text-align:center; vertical-align:middle; display:table-cell;

Answer 2

水平很容易，它是垂直的，这是一个麻烦。 要使文本和图像等内嵌元素居中，请使用text-align:center;。

要使div居中，您可以使用margin: 0 auto;

Answer 3

要将某些内容置于中心位置，请使用

margin:0px auto;

这相当于

margin-top:0px
margin-right:auto;
margin-bottom:0px
margin-left:auto;

或

margin 0px auto 0px auto;

你应该去寻找类似的东西：

margin 30px auto 0px auto;

请注意，这仅适用于具有设置宽度的元素。 另外，你可以使用

    line-height: 'your div height' 

将文字对齐

Answer 4

{width : auto; margin : auto}可以使用，您可能需要修复要居中的元素的宽度

Answer 5

只需在CSS代码中添加以下内容：

text-align: center;
vertical-align: middle;
line-height: 400px; /* the same as your div height */

的 DEMO

Answer 6

您可以使用绝对位置，将其置于页面中心

#item {
    height:400px;
    width:700px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -200px;
    margin-left: -350px;
    background-color:white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Answer 7

在此div之外创建一个div并使其宽度为100％。现在给你div margin: 0 aut o;使用position: relative。这应该工作。

<div style="width:100%">
  <div id="item"></div>
</div>