如何使用 css3 居中对齐 div？

Question

我是 css3 的新手。只是想知道如何居中对齐 div，它应该可以在 Web 浏览器、Web-kit 上运行。我没有页面的确切大小。我试过了

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

但这对我不起作用。

Answer 1

最好的方法是定义宽度，然后设置margin为auto & 0:

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

Fiddle

Answer 2

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

Answer 3

水平和垂直：

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

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

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

Answer 4

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

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

Here is an example Fiddle

Answer 5

请参阅我对此 Link 的回答，我仅使用 div 和 span 标记将 div

居中

如何使用 css3 居中对齐 div？

How to center align div using css3?

css

alignment

水平和垂直：

仅横向：