宽度不为 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; 添加到其直接父级来尝试，如下所示：

.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 (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>

您也可以使用 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 (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>

Answer 2

Example

使用您的 code-example，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 (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 class="col-md-3"></div>
  </div>

宽度不为 100% 时无法集中 div

can't centralized the div when it is not with 100% width

html

css

bootstrap-4