css - 是否允许使用 css 使对象居中？

Question

这是使物体居中的方法吗？这种方法也可以创建准确的中心位置，是否有另一种方法可以做到这一点？

.content {
    width:1200px;
    height:800px;
    position:absolute;
    left:50%;
    margin-left:-600px;
    top:50%;
    margin-top:-400px;
}

谢谢你的时间。

Answer 1

(function() {
  var toggle = true;
  setInterval(function() {
    if (toggle) {
      $("#content").html("Line 1");
    } else {
      $("#content").html("<div>Line 1</div><div>Line 2</div>");
    }
    toggle = !toggle;
  }, 1300);
}());

body {
  font: 36px Arial, sans-serif;
}

#container {
  color: white;
  background: #ffbd17;
  width: 400px;
  height: 260px;
}

#content {
  background: #06c;
  width: 120px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Centering example:
<div id="container">
  <div id="content">
    Line 1
  </div>
</div>

Answer 2

尝试简单：

content{
   margin:50% auto;
   text-align:center;/* if content has text then*/
   /*Your other properties like:width,height,etc*/
}

Answer 3

是的，如果您想将任何 div 水平和垂直居中，这就是确切的方式。

负边距正好是高度和宽度的一半，它将元素拉回到完美的中心。仅适用于固定高度/宽度的元素。

或者你可以使用

.content{
    width:400px;
    height:200px;
    text-align:center;
    line-height:200px;
}

或者如果您没有特定的度量，您可以在内联编码中使用它

<div style="display:table;height:300px;text-align:center;">
<div style="display:table-cell;vertical-align:middle;">
<!–content–&gt;
</div>
</div>  

如需进一步帮助，请参阅本教程，它非常有助于理解水平和垂直居中的元素。

问候。

Answer 4

我会像这样使用display: table-cell;. 这样它就会垂直和水平居中，并且不依赖于您要显示的元素的高度。

HTML

<div class="wrapper">
    <div class="content">
        I'm centered.
    </div>
</div>

CSSS

html {
    width: 100%;
    height: 100%;
}
body {
    display: table;
    width: 100%;
    height: 100%;
}
.wrapper{
    display: table-cell;
    vertical-align: middle;
}

.content {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    margin: 0 auto;
}

演示

http://jsfiddle.net/Gyq4t/

笔记

这在每个现代浏览器中都可以正常工作。我不在 IE7 中工作。