Question

我遇到一些奇怪的麻烦。我的问题应该是简单的解决方法，但是在阅读了无数“居中的div”文章之后，所有解决方案都没有用，我不确定该怎么做！我创建了一个JS小提琴来显示我的问题。

我需要一个小的红色框（＃sphere-content）在我的灰色框（#background）内水平和垂直居中。通常，可以通过简单地将margin设置为“ auto 0;”来解决此问题，但是由于某些原因，这似乎并不想起作用。我不确定这与父div的宽度和高度为100％明智吗？

以下是相关代码：

    <div id="background">
    <div id="sphere-content"></div>
    </div>

    #background {
    margin: 0px;
    padding: 0px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    background-color: #d5d5d5;
    }

    #sphere-content {
    background-color: red;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    }

JS小提琴：https://jsfiddle.net/e9pL4xg3/11/

非常感谢您！

Answer 1

您可以通过将margin: auto添加到#sphere-content并将display: flex添加到#background html元素中来实现。

JSFiddle

将div以100％宽度和100％高度的背景div居中

1 个答案: