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

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

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

CodePudding user response：

In my opinion, you can try it by adding 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 >
<div >
    <div >
        <div >
            <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>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 

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