宽度不是 100% 时不能集中 div

Question

对于不同的结果，我需要不同大小的列。 这是我的代码

  <div class="row ">
<div class="page-account-box">
    <div class="col-md-6 mx-auto ">
        <div class="account-box ">
            <div>
                The grid media feature is used to query whether the output device is grid or bitmap. If the output device is grid-based (e.g., a “tty” terminal, or a phone display with only one fixed font), the value will be 1. Otherwise, the value will be 0.
                The grid media feature is used to query whether the output device is grid or bitmap. If the output device is grid-based (e.g., a “tty” terminal, or a phone display with only one fixed font), the value will be 1. Otherwise, the value will be 0.
            </div>               
        </div>
    </div>
  </div>
</div>

这是 css：

 @media (min-width: 1294px) {
.page-account-box .account-box {
    width: 60%;
    height: auto;
    justify-self: center;
    padding: 0;
    border: 1px solid #e2efef;
    -webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11);
    box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
    position: relative;
    margin: 20px auto 30px;
    display: flex;
    background: #fff;
    border-radius: 20px;
    
}
}

 @media (min-width: 1000px) and (max-width: 1293px) {
.page-account-box .account-box {
    width: 100%;
    height: auto;
    padding: 0;
    border: 1px solid #e2efef;
    -webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11);
    box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
    position: relative;
    margin: 20px auto 30px;
    display: flex;
    background: #fff;
    border-radius: 20px;
}
 }

我想让帐户框 class 以任何分辨率放置在其容器的中心，但在更高分辨率（最小宽度：1294px）下它更倾向于右边，并且证明自我居中不会影响它。

Answer 1

在我看来，您可以通过添加display:flex; justify-content:center;来尝试它。 display:flex; justify-content:center; 像这样给它的直接父级：

 .account-box-container{ display:flex; justify-content: center; }.page-account-box.account-box { height: auto; justify-self: center; padding: 0; border: 1px solid #e2efef; -webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11); box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29); position: relative; margin: 20px auto 30px; display: flex; background: #fff; border-radius: 20px; } @media (min-width: 1294px) {.page-account-box.account-box { width: 60%; } } @media (min-width: 1000px) and (max-width: 1293px) {.page-account-box.account-box { width: 100%; } }

 <div class="row "> <div class="page-account-box"> <div class="col-md-6 mx-auto account-box-container"> <div class="account-box "> <div> The grid media feature is used to query whether the output device is grid or bitmap. If the output device is grid-based (eg, a “tty” terminal, or a phone display with only one fixed font), the value will be 1. Otherwise, the value will be 0. The grid media feature is used to query whether the output device is grid or bitmap. If the output device is grid-based (eg, a “tty” terminal, or a phone display with only one fixed font), the value will be 1. Otherwise, the value will be 0. </div> </div> </div> </div> </div>

您还可以使用 Bootstrap-4 而不是通过d-flex justify-content-center添加额外的 CSS ，如下所示：

 <div class="row "> <div class="page-account-box"> <div class="col-md-6 mx-auto d-flex justify-content-center"> <div class="account-box "> <div> The grid media feature is used to query whether the output device is grid or bitmap. If the output device is grid-based (eg, a “tty” terminal, or a phone display with only one fixed font), the value will be 1. Otherwise, the value will be 0. The grid media feature is used to query whether the output device is grid or bitmap. If the output device is grid-based (eg, a “tty” terminal, or a phone display with only one fixed font), the value will be 1. Otherwise, the value will be 0. </div> </div> </div> </div> </div>

Answer 2

例子

使用您的代码示例，div 完全居中。

你能举个例子吗？ 你为什么不使用 Bootstrap 的可能性？

 @media (min-width: 1294px) {.page-account-box.account-box { border: 1px solid #e2efef; -webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11); box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29); border-radius: 20px; margin: 20px auto 30px; } } @media (min-width: 1000px) and (max-width: 1293px) {.page-account-box.account-box { border: 1px solid #e2efef; -webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11); box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29); margin: 20px auto 30px; border-radius: 20px; } }

 <:-- CSS only --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="page-account-box row"> <div class="col-md-3"></div> <div class="col-md-6"> <div class="account-box p-4"> <div> The grid media feature is used to query whether the output device is grid or bitmap. If the output device is grid-based (eg,, a “tty” terminal, or a phone display with only one fixed font). the value will be 1, Otherwise. the value will be 0. The grid media feature is used to query whether the output device is grid or bitmap. If the output device is grid-based (eg,, a “tty” terminal, or a phone display with only one fixed font). the value will be 1, Otherwise. the value will be 0. </div> </div> </div> <div class="col-md-3"></div> </div>