Question

我有代码将div置于HTML页面的中心我的问题是margin: 0 auto只将div水平居中，但我希望它完全居中，所以也是垂直居中。

＆＃13;

body{
  background-position: center;
  background: #0a056f;
  background: -moz-linear-gradient(45deg, #0a056f 0%, #054fb5 100%);
  background: -webkit-linear-gradient(45deg, #0a056f 0%,#054fb5 100%);
  background: linear-gradient(45deg, #0a056f 0%,#054fb5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a056f', endColorstr='#054fb5', GradientType=1);
}

.login_register_recover_box{
  background-color: #fff;
  background-position: center;
  -moz-box-shadow:    0px 0px 50px 5px #091079;
  -webkit-box-shadow: 0px 0px 50px 5px #091079;
  box-shadow:         0px 0px 50px 5px #091079;
  width: 75%;
  margin: 0 auto;
  border-radius: 10px;
}

＆＃13;

<head>
  <link rel="stylesheet" type="text/css" href="assets/custom/reset.css">
  <link rel="stylesheet" type="text/css" href="assets/custom/custom1.css">
</head>

<body>
  <div class="login_register_recover_box">&nbsp;fdfdss</div>
</body>

＆＃13;

谢谢！

Answer 1

相反，您可以使用 flexbox 来实现相同目标。

要将div置于父级中心，您可以在父元素上应用display:flex以及align-items:center和justify-content:center;。

使用align-items:center，孩子们在父母内部居中垂直。

使用justify-content:center，孩子们在父母内部居中水平。

您可以在 A complete guide to CSS-FlexBox Tricks

了解详情

＆＃13;

.parent{
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:red;
}
.centered{
  width:100px;
  height:100px;
  background:blue;
}

＆＃13;

<div class='parent'>
  <div class='centered'></div>
</div>

＆＃13;

Answer 2

使用flexbox

＆＃13;

body{
    background-position: center;
    background: #0a056f;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
}

.login_register_recover_box{
    background-color: #fff;
    background-position: center;
    width: 75%;
    border-radius: 10px;
    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

    <div class="login_register_recover_box">&nbsp;
        fdfdss
    </div>
</body>

＆＃13;

保证金0自动赢得了一个div完全居中

2 个答案: