Question

您好我将div定位到页面中心时遇到了问题。

CSS：

.fancyClass{
  border: 1px solid #999;
  border-radius: 10px;
  display: inline-block;
  margin: 0 auto;  
}

我做错了吗？另外我应该提到这个div在另一个div中，所以这可能是个问题吗？怎么避免呢？

Answer 1

您是否尝试输入的宽度小于外部div？

类似的东西：

.fancyClass{
    width: 50%;
    margin: 0 auto; <!-- that does the actual centering -->
#all the other attributes you have
}

Answer 2

请试试这个并告诉我们

<强> HTML：

<div class="outterDiv">
    <div class="innerDiv">
        some thing here
    </div>
</div>

<强> CSS：

.outterDiv{
    width: 100%;
    background-color: #ccc;
    padding: 25px;
}
.innerDiv{
    width: 50%;
    background-color: #eee;
    margin: 0 auto;
    text-align: center;
}

的 fiddle EXAMPLE HERE 的

Answer 3

在这里，您可以看到div在页面中居中horizontally和vertically。这是 Demo 。

看看CSS。

body{margin:0 auto;
text-align:center;
}

.fancyClass{
  border: 1px solid #999;
  border-radius: 10px;
  display: inline-block;
  text-align:left;
  width: 25%;
  height: 25%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

 <div class="fancyClass"> 
    this text will be center
  </div>

Answer 4

这应该做的工作：

margin-right:25%;
margin-left:25%;

将div定位到页面的中心

4 个答案: