无法将 Div 居中以位于页面中间答案

【问题标题】：Cannot Centre a Div to be in the Middle of Page无法将 Div 居中以位于页面中间
【发布时间】：2015-08-16 15:39:45
【问题描述】：

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

尽管使用了 Margin-left: auto 和 Margin-Right:auto 它仍然不在页面中间。

任何帮助将不胜感激！

HTML：

<div class="OuterService">
            <div class="service">
                <div class="virus" style="width:250px; height:218px;">
                    <center><h3 style="width:200px; text-align:center">Computer Virus</h3>
                    <img src="virus.jpg" alt="virus" height="140px"/></center>
                </div>

                <div class="screenRepair" style="width:250px;">
                    <center><h3 style="width:auto; text-align:center">Screen Replacement</h3>
                        <img src="smashedScreen.jpg" alt="BrokenScreen" height="160px"/></center>
                </div>

                <div class="hardwareRepair" style="height:218px;">
                    <center><h3>Hardware Replacement</h3>
                        <img src="hardwareRepair.jpg" alt="hardwareRepair" height="130px"/></center>

                </div>

                <div class="WindowsReinstall" style="height:218px;">
                    <center>
                        <h3>OS Reinstallation</h3>
                        <img src="windowsInstall.jpg" alt="OS Reinstallation" height="150px;" width="220px;"/>
                    </center>
                </div>

                <div class="maintenance" style="width:250px;">
                    <center>
                        <h3>System Maintenance</h3>
                        <img src="SystemMaintenance.jpeg" alt="System Maintenance" height=150px;/>
                    </center>
                </div>
                <div class="SoftwareRepair" style="width:250px">
                    <center>
                        <h3>Software Repair</h3>
                        <img src="SoftwareRepair.png" alt="Software Repair" height="150px;" width="220px;"/>
                    </center>
                </div>
                <div class="MemoryUpgrades" style="width:250px; height:208px;">
                    <center>
                        <h3>Memory Upgrades</h3>
                        <img src="MemoryUpgrades.jpg" alt="Memory Upgrades" height="140px;"/>
                    </center>
                </div>

                <div class="DataRecovery" style="width:250px;">
                    <center>
                        <h3>Data Recovery</h3>
                        <img src="DataRecovery.jpg" alt="Data Recovery" height="150px;"/>
                    </center>
                </div>
            </div>
        </div>

CSS：

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

            .service {
                max-width: 1100px;
                display: table;
                margin-bottom: 20px;
                margin-left: auto;
                margin-right: auto;
            }
            .virus, .screenRepair, .hardwareRepair, .WindowsReinstall, .maintenance, .SoftwareRepair, .MemoryUpgrades, .DataRecovery {
                width:250px;
                float:left;
                margin-left: auto;
                margin-right: auto;
                margin-top: 0;
                border:1px solid #000;
            }

【问题讨论】：

使用width:auto，您的 DIV 应该会填满整个可用空间。所以它可能是“居中”的。你能更清楚地说明这个问题吗？

标签： html css position center

【解决方案1】：

你需要为你的类 outerService 指定一个宽度

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

另外，如果你希望 outerService 不指定大小，你可以使用 flexbox。假设outerService的容器是body..

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

目前所有主流浏览器的当前版本都支持 Flex，但如果您支持旧版本，请查看 here.

【讨论】：

完美！这正是我需要的！
你最好提一下flexbox的浏览器支持。

【解决方案2】：

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

您的 CSS 使用小写的 o 表示 outerService .outerService

尝试更改为 .OuterService { 宽度：自动；左边距：自动；边距右：自动； }

【讨论】：

那是一个错字。不过还是没什么区别

【解决方案3】：

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

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

如果您希望您的 div 在特定屏幕尺寸下动态变化，您可以尝试使用媒体查询以百分比值设置宽度。

【讨论】：