如何使用css3居中对齐div？

Question

我是css3的新手。只是想知道如何居中对齐div，它应该适用于网络浏览器，网络工具包。我没有页面的确切大小。我试过了

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

但这对我不起作用。

Answer 1

根据您的HTML，您可以使用display: flex来实现一个简单的完全居中的元素，其中包含少量CSS并且没有其他HTML元素

.container{
    display: flex;
    align-items: center;
    justify-content: center;
}

Here is an example Fiddle

Answer 2

最好的方法是定义宽度，然后将margin设置为auto＆amp; 0：

div.inputs{ margin: 0 auto; width 100%}

<强> Fiddle

Answer 3

如果您不知道元素的大小，可以将display: inline-block;与父级text-align: center;一起使用，或者使用display: table; margin-left: auto; margin-right: auto;

Answer 4

水平＆amp;垂直

稳定的解决方案（轻松支持灵活的高度）：

更稳定的代码可能看起来像这样适用于垂直和放大水平居中固定宽度，灵活的高度内容：

.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>

---

又快又脏：

根据您对其他答案的评论，您希望它在水平和垂直方向上居中或仅水平居中。您可以使用position absolute：

来完成此操作

.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;
}

Answer 5

在这里Link看到我的回答我在这里使用了div和span标签来居中div