如何居中div?

时间:2012-04-24 15:38:46

标签: javascript html css

我在使用HTML(垂直和水平)居中div时遇到问题。我的代码看起来像这样:

<div id="container">SOME HTML</div>

#container{
    width: 366px;
    height: 274px;
    margin: 50%;
    top: -137px;
    left: -188px;
    position:absolute;
}

只有chrome将此div放在屏幕中间。

6 个答案:

答案 0 :(得分:7)

这会使<div>水平居中:

#container{
    width: 366px;
    height: 274px;
    margin: 0 auto;
}

垂直居中不是很简单,您可能必须使用javascript,或者尝试this css solution

答案 1 :(得分:2)

#container{
    width: 366px;
    height: 274px;
    top: 50%;
    left: 50%;
    margin: -137px 0 0 -188px;
    position:absolute;
}

答案 2 :(得分:1)

您可以使用:

#container {
    // Your other values, but remove position: absolute;
    margin: 0 auto;
}

或者,您可以这样做:

#wrapper, #container {
    border: 1px solid red;
    height: 500px;
    width: 600px;
}

#wrapper {
    bottom: 50%;
    right: 50%;
    position: absolute;
}

#container {
    background: yellow;
    left: 50%;
    padding: 10px;
    position: relative;
    top: 50%;
}

你是HTML代码:

<div id="wrapper">
    <div id="container">
        <h1>Centered Div</h1>
        <p>
            This div has been centered within your browser window.</p>
    </div>
</div>

这会将<div>置于浏览器窗口的中间位置。

答案 3 :(得分:1)

这就是技巧(垂直和水平):

#container{
    position: absolute;
    width: 366px;
    height: 274px;
    left: 50%;
    top: 50%;
    margin-left: -183px; /* half width */
    margin-top: -137px; /* half height */
}

答案 4 :(得分:1)

试试这个:

<div class="cont">
  <div class="box"></div>
</div>

的CSS:

.cont{
  background-color: tomato;
  width: 600px;
  height: 400px;
  position: relative;
}
.box {
  width:100px;
  height:100px;
  background-color: teal;
  color:#fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

答案 5 :(得分:-1)

只使用CSS应该没问题:

这是demo

#container{
    width: 366px;
    height: 274px;
    margin: 50%;
    top: 50%;
    left: 50%;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}​