CSSレイアウトで中央揃えレイアウトを実現する方法

<!-- css -->
<スタイル>
    ＃親 {
        高さ: 200px;
        幅: 200ピクセル;
        境界線: 1px 実線の赤;

        display: table-cell; /* テーブルに変換します */
        text-align: center; /* 水平 */
        vertical-align: middle; /* 垂直 */
    }
    ＃子供 {
        背景色: 青;
        色: 白;

        display: inline; /* 子要素はインラインまたはインラインブロックに設定されます*/
    }
</スタイル>

<!-- html -->
<div id="親">
    <div id="child">コンテンツ</div>
</div>

<!-- css -->
<スタイル>
    ＃親 {
        高さ: 200px;
        幅: 200ピクセル;
        境界線: 1px 実線の赤;

        position: relative; /* 相対的な位置を設定する */
    }
    ＃子供 {
        高さ: 50px;
        幅: 50px;
        色: 白;
        背景色: 青;

        /* 絶対位置指定、4方向を0に設定後、余白は自動に設定されます */
        位置: 絶対;
        左: 0;
        上: 0;
        右: 0;
        下部: 0;
        マージン: 自動;
    }
</スタイル>

<!-- html -->
<div id="親">
    <div id="child"></div>
</div>

<!-- css -->
<スタイル>
    ＃親 {
        高さ: 200px;
        幅: 200ピクセル;
        境界線: 1px 実線の赤;

        display: flex; /* 親要素をフレキシブルボックスに変換する*/
        display: -webkit-flex; /* Safari */
    }
    ＃子供 {
        高さ: 50px;
        幅: 50px;
        背景色: 青;

        マージン: 自動;
    }
</スタイル>

<!-- html -->
<div id="親">
    <div id="child"></div>
</div>

<!-- css -->
<スタイル>
    ＃親 {
        高さ: 200px;
        幅: 200ピクセル;
        境界線: 1px 実線の赤;

        position: relative; /* 相対的な位置を設定する */
    }
    #child { /* 子要素が自身の幅と高さを知っている場合 */
        背景色: 青;

        幅: 50px;
        高さ: 50px;
        上マージン: -25px;
        左マージン: -25px;
        位置: 絶対;
        左: 50%;
        上位: 50%;
    }
</スタイル>

<!-- html -->
<div id="親">
    <div id="child"></div>
</div>

<!-- css -->
<スタイル>
    ＃親 {
        高さ: 200px;
        幅: 200ピクセル;
        境界線: 1px 実線の赤;

        position: relative; /* 相対的な位置を設定する */
    }
    #child { /* 子要素は自身の幅と高さを知らないので、transform の translate を使用します */
        境界線: 1px 青

        位置: 絶対;
        上位: 50%;
        左: 50%;
        -webkit-transform: translate(-50%,-50%) を変換します。
        -ms-transform: 変換(-50%,-50%);
        -o-transform: 変換(-50%,-50%);
        変換: translate(-50%,-50%);
    }
</スタイル>

<!-- html -->
<div id="親">
    <div id="子">
        <div id="コンテンツ">
            コンテンツ 1
            <br/>
            コンテンツ2
        </div>
    </div>
</div>

<!-- css -->
<スタイル>
    ＃親 {
        高さ: 200px;
        幅: 200ピクセル;
        境界線: 1px 実線の赤;

        display: flex; /* 親要素をフレキシブルボックスに変換する*/
        display: -webkit-flex; /* Safari */
        justify-content: center;/* 水平 */
        align-items: center; /* 垂直 */
    }
    ＃子供 {
        高さ: 50px;
        幅: 50px;
        背景色: 青;
    }
</スタイル>

<!-- html -->
<div id="親">
    <div id="child"></div>
</div>