Как отцентрировать контейнер с контентом

#html #css

Проблема состоит в том, что я не понимаю, каким образом делается подобный враппер
и устанавливается в середине контейнера-родителя.

Каким образом элементы располагаются фиксированно в центре? Я так понимаю, это внутренний
div, который и фиксирует весь контент - но могу и ошибаться. 



Вот моя попытка:

CSS:

@font-face {

    font-family: BebasNeue;
    src: 
        url("BebasNeue Bold.ttf"),
        url("BebasNeue Book.ttf"),
        url("BebasNeue Light.ttf"),
        url("BebasNeue Thin.ttf"),
        url("BebasNeue Regular.ttf");

}

@font-face {

    font-family: logo;
    src:
        url("../fonts/logo_lobster_1_4.otf");

}

main {

    max-width: 1280px;

}

.wrapper {

    max-width: 1024px;


}

#logo {
    font-size: 49px;
    font-family: logo, BebasNeue, serif;
    color: #3cc3b5;

}


HTML:




    
    
  




 
 
  

  


     Aditii

  
        span some text

    

    



    
 





    

Ответы

Ответ 1

Раньше делали так:



.wrapper {
  background: cyan;
}
.container {
  width: 100%;
  max-width: 80%;
  margin: 0 auto;
  background: rgba(0, 0, 0, .3);
}

  

    Content
  





Контейнер центрируется за счет margin: 0 auto;, при этом не растягивается больше
max-width.

Сейчас нам доступны флексбоксы:



.wrapper {
  background: cyan;
  display: flex;
  justify-content: center;
}
.container {
  flex-grow: 1;
  max-width: 80%;
  background: rgba(0, 0, 0, .3);
}

  

    Content
  





Здесь flex-grow: 1; у конейтнера нужен, чтобы он растягивался на максимально доступную
ему ширину.