親要素や画像の上に文字などの子要素を中央に配置する＜上下中央、左右中央、上下左右中央＞

画像の上に文字を配置することがよくあります、その文字を上下中央、左右中央、上下左右中央にする方法。

①親要素（下地）に　position: relative;

②子要素（上に重ねるもの）に　position: absolute;

これは基本です、そこに「上下中央」、「左右中央」、「上下左右中央」を書き加えます。

上下中央

    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);

position: absolute;

top: 50%;

left: 0%;

transform: translateY(-50%);

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

左右中央

    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);

position: absolute;

top: 0;

left: 50%;

transform: translateX(-50%);

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

上下左右中央

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);