我是css3的新手。只想知道如何使div居中对齐,它应该可以在网络浏览器,web-kit上工作。我没有页面的确切大小。我试过了

div.inputs {
   margin-left:auto;
   margin-right:auto;
}

但这对我永远都行不通。

最佳答案

水平和垂直:

稳定的解决方案(轻松支持灵活的高度):

看起来更稳定的代码可以在垂直和水平方向居中固定宽度,高度灵活的内容:

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  margin-left: auto;
  margin-right: auto;
  width: 100px
  /*whatever width you want*/
  ;
}
<div class="outer">
  <div class="middle">
    <div class="inner">

      <h1>The Content</h1>

      <p>The inner content :)</p>

    </div>
  </div>
</div>



又脏又臭:

根据您对另一个答案的评论,您希望其水平和垂直居中或仅水平居中。您可以使用绝对位置来做到这一点:

.centerDiv {
    width:270px;
    height:150px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-75px 0 0 -135px;

    background-color: green;
}
<div class="centerDiv">Center Me :)</div>



仅水平:

如果要使其仅水平居中,请使用:
.centerDiv {
    width: 270px;
    margin: 0 auto;
}

09-10 01:54
查看更多