Html 不能把div放在页面中间

我试图让我的Div在页面中居中，但是我无法让它正常工作

尽管使用左边余量：Auto和Load右边：Auto-它仍然不位于页面中间。

任何帮助都将不胜感激

HTML:

---

HTML中的类名使用大写字母O表示OuterService

.outerService
{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

您的CSS对outerService使用小写的o

.outerService
{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

试着换成 .外部服务{ 宽度：自动； 左边距：自动； 右边距：自动；

---

}

对于某些div，必须将div宽度固定在特定的px上。试试这个：

.outerService {
            width: 850px;
            margin:0 auto;
        }

---

如果希望div在特定屏幕大小下动态更改，可以尝试使用媒体查询以百分比值设置宽度

您需要为类outerService指定宽度

.outerService
{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

此外，如果希望outerService不指定大小，可以使用flexbox。假设outerService的容器是主体

body
{
    display: flex;
    justify-content: center;
}
.outerService
{
    width: auto;
}

---

Flex目前在所有主流浏览器的当前版本中都受支持，但如果您支持较旧的版本，请看

，这是一个打字错误。但是，它仍然与

width:auto没有区别。您的DIV应该填充整个可用空间。所以它可能是“中心的”。你能更清楚这个问题吗？太好了！这正是我需要的！您最好提到flexbox的浏览器支持。