Question

我希望将内容纵向和横向放在页面中。我似乎无法让它发挥作用。这里有人可以帮忙吗？

感谢。

<style type = "text/css">
#loginMenu {
border:5px solid green;
padding:10px 10px 10px 10px;
background-color:#FF9;
display: table;
position: absolute;
text-align:center;
height: 200px;
width: 400px;
}
.centrediv
{
    margin: auto;
    vertical-align:middle;
}
</style>

<div id="loginMenu"></div>

Answer 1

Flexbox是最好的。例如：

 <div class="Aligner">
      <div class="Aligner-item">…</div>
    </div>

        .Aligner {
           display: flex;
           align-items: center;
           justify-content: center;
        }
    .Aligner-item {
    max-width:50%;
    }

Answer 2

您应该使用flexbox，因为它可以轻松满足您的需求。看看片段：

<!-- HTML -->
    <body>
    <div></div>
    </body>

<!-- CSS -->

    body{
        display: flex;
        vertical-align: middle;
        height: 100vh;
        width: 100%;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        margin: 0px;
    }
    div{
        height: 100px;
        width: 100px;
        background-color: #f00;
        margin-top: -50px;
    }

Answer 3

基于W3Schools的页面

.centrediv
{
    padding: 100px 0;
    text-align: center;
}

HTML / CSS：水平和垂直居中内容

3 个答案: