编辑：

Question

我想将exactCenter div居中到页面的确切中心。我正在使用bootstrap。我尝试如下，但由于动态宽度（我需要宽度是动态的），我不知道如何将它居中到页面的确切中心？

我创建了Fiddle

<div class="wrapper row">
    <div class="col-xs-12 col-sm-6 col-md-4 exactCenter">Test</div>
</div>

的CSS：

.wrapper{
    width: 100%;
    height: 100%;
    position: fixed; 
}
.exactCenter {
    position: fixed; 
    background-color: #00FF00; 
    top: 50%; 
    left: 50%; 
    text-align: center;
    /*margin-top: -15%; 
    margin-left: -30%; */
}

编辑：

我想避免transform: translate(-50%, -50%); - 有时文字模糊。

我用Google搜索的所有答案都有固定的宽度和高度（内部div）。但在我的情况下，宽度和高度是动态的。

Answer 1

试试这个：

.exactCenter {
    position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 100px;
  background-color: #ccc;
  border-radius: 3px;
}

有很多不同的方法 - 这只是一个简单的例子

居中动态div

编辑：

1 个答案: