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–>
</div>
</div>

要获得进一步的帮助，请转到tutorial，这对于理解水平和垂直对中元素非常有帮助。

问候。

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中工作。

是否允许此方法使用css对象居中？

4 个答案: