<section class="section01">
    <div class="box01">上下中央</div>
</section>

<section class="section02">
    <div class="box02">左右中央</div>
</section>

<section class="section03">
    <div class="box03">上下左右中央</div>
</section>

<section class="section04">
    <div class="box04">上下左右中央<br>transform: translate(-50%,-50%);<br>を使ったバージョン</div>
</section>
html,
body{
    height: 100%;
}

.section01,
.section02,
.section03,
.section04{
    width: 100%;
    height: 100%;
    position: relative;
}
.section02,
.section04{
    background-color: #000;
}

.box01,
.box02,
.box03,
.box04{
    background-color: #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    height: 250px;
    width: 250px;
}

.box01{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

.box02{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

.box03{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.box04{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.