Центрирование текста по горизонтали внутри блока

Question

Есть сайт

Необходимо, чтобы текст Каталог (в левом верхнем углу) (блок .windowheader) располагался по центру содержащего его блока. Привожу код

#dropdownwindow {
    display: none;
    margin-left: 0;
    margin-right: 100%;
    height: 100vh;
    z-index: 5;
    /*display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
    "left search search search"
    "left right right right";
    grid-area: mainwindowpart;*/
}
    
#fullblock {
    height: 100vh;
    /*display: grid;*/
    /*grid-template-columns: 4fr 1fr;
    grid-template-areas: 
        "mainwindowpart freespace";*/
    position: static;
}

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

.CatalogMenuLeft {
    width: 20%;
    /*margin-left: auto;
    margin-right: auto;*/
}

.catalogheader {
    width: 100%;
    height: 20%;
    /*display: flex;*/
    /*justify-content: center;*/
    margin-left: auto;
    margin-right: auto; 
}

/*.flexelem {
    flex: 1;
    
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}*/

.crossline {
    flex: 1;
    /*width: 100%;*/
    height: 20px;
}

.windowheader {
    flex: 1;
    /*width: 100%;*/
    margin: auto;
    text-align: center;
}

.flexdisabledscrollbar1, .flexdisabledscrollbar2 {
    flex: 5px;
    border-right: 5px solid #ddd;   
}

.flexline1 {
    display: flex;
}

.flexline2 {
    display: flex;
}

.windowmenulist {
    
}

<div id="dropdownwindow">
        <!-- <div class="crossline">
            <div class="close">&times;</div>
        </div> -->
        <div class="contentdropdownwindow">
            <div class="CatalogMenuLeft">
                    <div class="catalogheader">
                            <div class="flexline1">
                                    <div class="crossline">
                                    </div>
                                    <div class="flexdisabledscrollbar1">
                                    </div>
                            </div>      
                            <div class="flexline2">     
                                    <div class="windowheader">
                                        <h4>Каталог</h4>
                                    </div>
                                    <div class="flexdisabledscrollbar2">
                                    </div>
                            </div>      
                    </div>
                            <div class="windowmenulist">
                                    <div >
                                        Смартфоны и гаджеты
                                    </div>
                                    <div>
                                        Ноутбуки и компьютеры
                                    </div>
                                    <div>
                                        Телевизоры, аудио-видео, Hi-Fi
                                    </div>
                                    <div>
                                        Бытовая техника для дома и кухни
                                    </div>
                                    <div>
                                        Строительство и ремонт
                                    </div>
                                    <div>
                                        Дом и дача
                                    </div>
                                    <div>
                                        Фото, видео, системы безопасности
                                    </div>
                                    <div>
                                        Автотовары
                                    </div>
                                    <div>
                                        Канцтовары, Мебель и Офисная техника
                                    </div>
                                    <div>
                                        Красота и здоровье
                                    </div>
                            </div>
            </div>
            <div class="myscroll">
            
            </div>
            <div class="centerdropdownwindow">
                    <div class="CatalogMenuSearch">
                    </div>
                    <div class="CatalogMenuRight">
                    </div>
            </div>
        </div>
<!--<div>-->        
<!--</div>-->
</div>

Замечание. Привожу еще скриншоты

Есть еще нюанс, что все эти блоки на .dropdownwindow накладываются на блоки основной страницы (z-index для .dropdownwindow равно 5 , а для #pageHeader .headerinsides z-index равно 3) (судя по размерам блоков .catalogheader, .flexline1, .flexline2)

Answer 1

Используйте display: table; к родительскому элементу и display: table-cell; vertical-align: middle; к дочернему элементу.

.container {
  display: flex;
}

.windowheader {
  flex: 1;
  height: 200px;
  text-align: center;
  display: table;
  background-color: #eee;
}

h4 {
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <div class="windowheader">
    <h4>Каталог</h4>
  </div>
</div>

БЛОГ НА HUSL

Центрирование текста по горизонтали внутри блока

Ответы (1 шт):