Как сделать div по середине

Последнее обновление на 16.12.2022

Выровнять по горизонтали тег div  и текст заключенный в div по середине css код

.centr {
    position: relative;
    background-color:orange;
    width: 500px;
    margin: 0 auto;
}
.titleCenter {

    display: block;
    text-align: center;
}

<div class="centr"><span class="titleCenter">Выравниваем</span></div>

Результат выравнивания div по середине и горизонтали

Как выровнять по горизонтали несколько div не заданной width (шириной) по середине css код

.centr-multidiv {
    text-align: center;
}
.first-block, .second-block,.third-block,.four-block {
display: inline-block;
width: 140px;
height: 200px; 
line-height: 150px;
margin-right: -0.25em;
}
.first-block, .second-block,.third-block,.four-block {
display: inline-block; 
}
.first-block{
background-color:aqua;
}
.second-block{
background-color:yellowgreen;
}
.third-block{
background-color:violet;
}
.four-block{
background-color:tomato;
}

<div class="centr-multidiv">
        <div class="first-block">1</div>
        <div class="second-block">2</div>
        <div class="third-block">3</div>
        <div class="four-block">4</div>
        </div>

Вывод и выравнивание множество блоков div по середине

Выравнивание блока заданного в процентах div с использованием display: table

* {
  margin: 0;
}
.wrap-main{
  display: table;
  width: 40%;
  background-color:aquamarine;
 	margin-left: auto;
 	margin-right: auto;
}
.block-children{
    display: table-cell;
  height: 60px;
  text-align: center;
  vertical-align: middle;
  /*overflow: auto;*/
}

<div class="wrap-main"><div class="block-children">Выровнять по вертикали</div></div>

Результат выравнивания блока div с применением table

Как выровнять содержание текста внутри блока div

 
 .block-centr1 {
height: 100px;
line-height: 100px;
width: 200px;
text-align: center;
background-color:rgb(200, 253, 236);
}

<div class="block-centr1">Выровнять текст</div>

Результат выравнивания содержания текста внутри блока div по вертикали и горизонтали