Question

我在另一个div #text内有一个名为#box的div。现在我已经尝试通过这样做来#text：

#box {
  width: 50%;
  #text {position: relative; margin-left: 48%;}
}

此代码将#text大约放在#box的中心，但是当我调整屏幕大小时，#text的大小会相对于屏幕大小发生变化，因此大小它的margin-right发生了变化，它不再完全位于中心位置。

我听说有一个＆＃34; hack＆＃34;对于这涉及一些包装div，但我不想过度复杂我的CSS或HTML。有一种简单的方法可以将div水平放置在其父级的中心吗？

Answer 1

使用flexbox是IMO水平和垂直居中儿童的最佳方式。它的support很好。

Answer 2

首先，您发布的CSS无效。你可以用这样的东西来完成你想要的东西：

CSS

body {
    width:100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#box {
    width:100%;
    height: 500px;
    background: lightblue
}
#test {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    margin: 0 auto
}

HTML

<div id="box">
    <div id="test">
        hello
    </div>
</div>

See the JS.Fiddle

Answer 3

在#text

的CSS中使用margin: 0 auto;

Answer 4

您想要精确的中心页面，无论内容如何？做这样的事情：

p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

相对于父级，在元素的容器上设置以下属性：

div.containerOfPs {
  position: relative;
}

有没有办法将div直接放在它父母的中心？

4 个答案: