css add a aside div to a center div

Question

I'v searched the SO but none is same question.

.container {
  display: flex;
  justify-content: center;
}

.aside-left {
  width: 200px;
}

<div class="container">
  <aside class="aside-left">
    menu1 menu2
  </aside>
  <div class="content">
    pagesssssssssssss
  </div>
  <footer>
    copyright
  </footer>
</div>

requirements:

1. the content div always center in window, ignore the aside div
2. when window width < 991px, aside display none;
3. better use the flex not the float solution

first-item-on-center-and-second-item-at-last-in-flex is relative but the aside tag still influenced the content div

current I know how center the container, but I wish can center the content div in the window, and aside left should float left on the content div

Answer 1

Not sure if I understood but try this:

<div class="window">
    <div class="container">
        <aside class="aside-left">
            menu1
            menu2
        </aside>
        <div class="content">
            pagesssssssssssss
        </div>
        <footer>
            copyright
        </footer>
    </div>
</div>

<style>
.window {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container {
    
}
.aside-left {
    width: 200px;
    height: 100%;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
}
@media screen and (max-width: 990px) {
    .aside-left {
        display: none;
    }
}
</style>

Answer 2

is that what u mean? i mean if u want just a one child to be centered u put justify-self: center; on him

    .container {
    display: grid;
    width: 100%;
}
.content {
    justify-self: center;
}
.aside-left {
width: 200px;
}
@media (max-width:991px) {
    .aside-left {
        display: none;
    }
}