Question

我正试图以div为中心。 div的宽度为400pt，主体的宽度至少为500pt，留出最小的空间。在div周围50pt。我的代码如下所示：

<html>
    <style>
        body{
            min-width:500pt;    
        }

        #centered{
            position:absolute;
            background-color:#ff0000;
            width:400pt;
            left:calc(50% - 200pt);
            height:400pt;
        }
    </style>
    <body>
        <div id="centered"></div>
    </body>
</html>

只要浏览器的宽度大于min-width，一切正常：

但是，只要浏览器的宽度小于min-width，并且滚动条出现在底部，当滚动条在左侧时，div只会在您看到的空间中居中，但不会集中在整个（可滚动）主体的中间：有没有办法解决这个问题？

如果您不了解我的问题，请随时提问。

Answer 1

您的身体无需最小宽度，只需添加此

即可

#centered{   
max-width: 400px;
   width: 100%;
   position: relative;
   background-color: red;
   display: block;
   margin: 100px auto;
}

如果它不起作用，请随时发表评论：）

Answer 2

试试这个

<style>
    #centered{
        position:absolute;
        background-color:#ff0000;
        width:400pt;
        left:calc(50% - 200pt);
        height:400pt;
    }
    @media screen and (max-width: 500pt){
        #centered{
            width:100%;
            left:0px;
        }
    }
</style>

<body>
    <div id="centered">
    </div>
</body>

当浏览器小于min-width时，div不会居中

2 个答案: