Question

我想知道如何使用CSS居中div。我用谷歌搜索了一些东西＆amp;检查stackoverflow但它与我的CSS代码冲突。

这是我的代码（以防万一）：

body, p, span, div  {
    font-family: 'Droid Sans', arial, serif;
    font-size:12px;
    line-height:18px;
    color:#6d6d6d; } 
.countdown { 
    padding-top:15px; width: 100%;
    height: 68px;
    margin:0 auto 0 auto;
    bottom:0;
    position:absolute;
}
.countdown .countdown_section{
    background:url('images/backcountdown.png') no-repeat 1px top;
    float:left;
    height:100%;
    width:54px;
    margin:0 5px;
    text-align:center;
    line-height:6px;
}
.countdown .countdown_amount { 
    font-size:15px;
    color:#ab7100; 
    text-shadow:0 0.8px #fedd98; 
    line-height:52px; 
    font-weight:bold; 
    text-align: left; 
}
.countdown span { 
    font-size:8px;
    color:#999999;
    text-transform:uppercase;
    line-height:26px; 
}

<body>
<div class="countdown clearfix">							
</div>
</body>

Answer 1

以下内容自动将元素水平居中：

margin: 0 auto;

Answer 2

您可以使用以下css将具有特定宽度的div居中：

#yourDiv {
    width: 400px;
    margin: 0 auto;
}

Answer 3

如果设置了固定宽度，并且您输入了正确的DOCTYPE，

这样做：

 Margin-left: auto;
 Margin-right: auto;

希望这有帮助

Answer 4

以div使用为中心：

#content{
    margin: 0 auto;
}

<div id="content">This will be centered horizontally</div>

Answer 5

<div style="margin:auto; width: 100px;">lorem</div>

Answer 6

以上答案适用于具有相对或静态定位的div。对于绝对定位的元素（例如.countdown元素），您需要设置left: 50%和margin-left: -XXXpx，其中XXX代表div宽度的一半（包括填充和边框）。

（例如：http://jsfiddle.net/7dhwG/）

Answer 7

这将使您的页面居中，效果很好。

  #yourdiv {
  width: width you want px;
  margin: 0 auto;
     }

Answer 8

你也可以通过在px中设置左边的50％和左边距到半边的全部宽度来居中绝对位置div。

div {
 position: absolute;
 width: 500px;
 left: 50%;
 margin-left: -251px;
}

Answer 9

停止使用保证金：0自动，跨浏览器的方式是Here我测试了它，它在所有浏览器上都能完美运行

如何用CSS中心DIV？

9 个答案: