Question

当我调整浏览器窗口大小时，我的div会降到最低点，并且有一个很大的空间。我希望我的div应该保留在页面的中心，即使调整窗口大小小于div的大小。在我的学校，他们没有教这个，但我想在页面中心对齐这个div

    <!DOCTYPE html>
<html>
<head>
<title>CSS centering Done Right.</title>

<style>

* {
    margin: 0;
    padding: 0;
}
html, body, .m {
    height: 100%;
    width: 100%;
}
.m {
    opacity:1;
    font-size: 0;
    overflow: auto;
    text-align: center;
    /*styling>>*/
    background-color: #8F1C10;
}
.m::before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.m>div {
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 300px;
    padding: 14px;
    vertical-align: middle;
    /*styling*/
    color:white;
    background-color: #140A08;
    outline:none;
}

</style>

</head>
<body>

<title>CSS centering Done Right.</title>
<div class="m">
    <div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, enim, possimus, voluptates, quia voluptatibus voluptas eum quaerat iure aperiam asperiores debitis fuga itaque quibusdam a ad odio assumenda iusto voluptatem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, ex quia consequatur quae quasi amet veniam est quas error quos perferendis ducimus non similique in soluta magnam dolore molestias veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, doloremque iste magni in eveniet ipsa odio mollitia eligendi magnam placeat aliquam hic reprehenderit reiciendis itaque assumenda ratione delectus. Alias, quis.</div>
</div>

</body>
</html>

Answer 1

margin: auto;就是您所需要的。试试这个：

<style>

* {
    margin: 0;
    padding: 0;
}
/*html, body, .m {
    height: 100%;
    width: 100%;
}*/
.m {
    opacity:1;
    font-size: 0;
    overflow: auto;
    text-align: center;
    margin: auto;
    /*styling>>*/
    background-color: #8F1C10;
}
.m::before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.m>div {
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 300px;
    padding: 14px;
    vertical-align: middle;
    /*styling*/
    color:white;
    background-color: #140A08;
    outline:none;
}

</style>

当我调整浏览器窗口大小时，我的div会降到最低点，并且会有一个很大的空间

1 个答案: