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

Question

I need different size of the column on different resultions. this is the code that I have

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

and this is the 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;
}
 }

I want to make the account-box class be placed in center of its container in any resolution but in higher resolution (min-width: 1294px) it tends to the right more, and justify self to center doesn't effect on it.

Answer 1

In my opinion, you can try it by adding display:flex; justify-content:center; display:flex; justify-content:center; to its direct parent like so:

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

You can also use Bootstrap-4 instead of adding additional CSS by d-flex justify-content-center like so:

 <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

Example

Using your code-example, the div is perfectly centred.

Can you please show an example? Why are you not using the Bootstrap possibilities?

 @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>