JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="block">
    <div class="block_center_x">center_x</div>
</div>
<br />
<div class="block">
    <div class="block_center_y">center_y</div>
</div>
<br />
<div class="block">
    <div class="block_center_xy">center_xy</div>
</div>
<br />
<div class="block2">
    <div class="block2_center_fix"></div>
    <div class="block2_center_y">
        Текст
    </div>
    <div class="block2_center_y">
        Текст Всегда будет по центру<br />
        и не важно сколько строк
    </div>
    <div class="block2_center_y">
        1) Бу га га<br />
        2) Ку ку<br />
        3) Абра кадабра
    </div>
</div>

CSS

.block {
    background: #cccccc;
    border: 1px solid #907676;
    position: relative;
    height: 150px;
    width: 150px;
}
.block_center_x {
    background: #E75F5F;
    left: 50%;
    margin-left: -50px;
    position: absolute;
    height: 100px;
    width: 100px;
}
.block_center_y {
    background: #E75F5F;
    margin-top: -50px;
    position: absolute;
    top: 50%;
    height: 100px;
    width: 100px;
}
.block_center_xy {
    background: #E75F5F;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    position: absolute;
    top: 50%;
    height: 100px;
    width: 100px;
}
/*************/
 .block2 {
    background: #cccccc;
    border: 1px solid #907676;
    position: relative;
    text-align: center;
    height: 250px;
    width: 400px;
}
.block2_center_fix {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
}
.block2_center_y {
    background: #ffffff;
    display: inline-block;
    vertical-align: middle;
}