CSSは、水平および垂直の共通メソッドを中心に

図1に示すように、要素は、水平方向中央に配置され

もちろん、最高です。

マージン：0自動;

中心そんなに悪いの理由：
1は、要素の幅を設定されていない、事を中心にどのようにノー幅！
2、助けていない、まだ幅を設定し、あなたが設定され、右のインライン要素であり、要素とブロック要素ライン内で、どのように変換するインライン要素は、要素が私の他の記事を参照してブロック間の差！
例1：

<divのクラス = " ボックス" > 
    <divのクラス = " コンテンツ" > 
        哇居中了！
     </ div> 
</ div> 

<スタイルタイプ= " テキスト/ cssの" > 
■は{ 
    背景 - 色：＃FF8C00。
    幅：300ピクセル; 
    高さ：300ピクセル;    マージン：
  0 自動; 
} 
.content { 
    背景 - 色：＃1 F00。
    幅：100ピクセル; 
    高さ：100pxに。   行
  -height：100pxに; //垂直テキストブロック内の中心に位置します 
    のテキスト整列：センター; //文字居中
    マージン：0自動; 
}
 </スタイル>

2、水平方向および垂直方向のセンタリング要素

スキーム1：位置素子幅既知の
位置：親要素は次のように設定されている相対的な;
に設定し、子要素：位置：絶対;
左に応じて50％〜50％、およびその要素自体の幅の距離を差し引くを達成することができます

< DIV クラス= "ボックス" > 
    < DIV クラス= "コンテンツ" > 
    </ DIV > 
</ DIV > 

■は{ 
    背景色：＃FF8C00。
    幅：300ピクセル; 
    高さ：300ピクセル;   位置：相対; 
} 
.content { 
    背景色：＃1 F00。
    幅：100ピクセル; 
    高さ：100pxに。  位置：絶対; 
    左：50％; 
    トップ：50％; 
    マージン：-50px 0 0 -50px。
}

スキーム2：位置要素の幅を変えるには、不明である
かの一例に過ぎマージン上記の未知の要素の幅は、：-50px 0 0 -50px;置き換え：変換：変換（-50％、 - 50％）;
上記の効果を！
例3：

< DIV クラス= "ボックス" > 
    < DIV クラス= "コンテンツ" > 
    </ DIV > 
</ DIV > 

■は{ 
    背景色：＃FF8C00。
    幅：300ピクセル; 
    高さ：300ピクセル; 
    位置：相対; 
} 
.content { 
    背景色：＃1 F00。
    幅：100ピクセル; 
    高さ：100pxに。
    位置：絶対; 
    左：50％; 
    トップ：50％; 
    変換：変換（-50％、 - 50％）。
}

プログラム3：フレックスレイアウト：親要素プラス

表示：フレックス。
正当化-コンテンツ：センター;
align-items: center;

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: flex;　　　　　　　　//flex布局
    justify-content: center;　　//使子项目水平居中
    align-items: center;　　　　//使子项目垂直居中
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
}

方案4：table-cell布局
示例 5：
因为table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了橘黄色，不推荐使用

<div class="box">
    <div class="content">
        <div class="inner">
        </div>
    </div>
</div>

.box {
    background-color: #FF8C00;//橘黄色
    width: 300px;
    height: 300px;
    display: table;
}
.content {
    background-color: #F00;//红色
    display: table-cell;
    vertical-align: middle;//使子元素垂直居中
    text-align: center;//使子元素水平居中
}
.inner {
    background-color: #000;//黑色
    display: inline-block;
    width: 20%;
    height: 20%;
}

CSSは、水平および垂直の共通メソッドを中心に

おすすめ