MRRI

親要素(position: relative）に対して子要素(position: absolute)を中央配置する基本のhtml

<div class=”parents”>
　<p class=”child”>子要素</p>
</div>

●上下左右中央配置CSS

.parents {
　position: relative;
　width: 600px;
　height: 600px;
}
.child {
　position: absolute;
　top: 50%;
　left: 50%;
　transform: translate(-50%, -50%);
　-webkit-transform: translate(-50%, -50%);
　-ms-transform: translate(-50%, -50%);
}

●上下中央配置CSS

.parents {
　position: relative;
　width: 600px;
　height: 600px;
}
.child {
　position: absolute;
　top: 50%;
　left: 0;
　transform: translateY(-50%);
　-webkit-transform: translateY(-50%);
　-ms-transform: translateY(-50%);
}

●左右中央配置CSS

.parents {
　position: relative;
　width: 600px;
　height: 600px;
}
.child {
　position: absolute;
　top: 0;
　left: 50%;
　transform: translateX(-50%);
　-webkit-transform: translateX(-50%);
　-ms-transform: translateX(-50%);
}