CSSの要素が何をするか、道を中心に？

子要素は、垂直方向と水平方向の親要素の内側を中心としましょう

私は、ここにいくつかの要素が中心かの問題、我々はそれらの事、簡単なCSSの要素の話に来るが中心とき... CSSはしばしば遭遇し、HTMLと接触している多くの小さなパートナーがあると信じて
CSSの要素をミドルレベル（約）センターに、垂直（上下）は、垂直方向と水平方向中心にセンタリングされます。
バルクブロック要素とインライン（インラインブロック要素は、インラインブロックはまた、インライン要素を送られる）もまた3つのカテゴリに分類インライン要素：まず、それをの、要素は2つのカテゴリに分類されるブロック要素、インライン要素、変数の要素];のは、使用される要素の型を中心とするさまざまな方法を見てみましょう。
一般的なインライン要素を持っている-ハイパーリンク、IMG -絵、入力-入力ボックス、スパン-定義されたテキストブロック内...
共通ブロック要素はdiv要素がある-最も一般的に使用されるブロックレベル要素、H1 -h6-見出しを、 P -段落...

中心に

要素は、インラインの幅と高さに配置されないので、サイズ自体がコンテンツによって張られるインライン要素について1.ので、ここでは、テキスト整列使用することができます達成するために中心を略中央に、
次のように特定のコードは次のとおりです。

<!-- css样式 -->
<style>
    div{width: 600px;height: 200px;background: pink;text-align: center;}
    span{background: #ccc;}
</style>

<!-- HTML结构 -->
<div>
    <span>内容撑开容器大小</span>
</div>

図の効果：

ブロック要素のための2、サブ要素の親要素の大部分を達成するためには、周りの中央に配置され、ここではマージンを使用する必要があります：0自動;マージン属性は、ボックスとボックスの間の距離です。
次のように具体的なコードは::

<!-- css样式 -->
<style>
    div{width: 600px;height: 100px;background: pink;}
    p{width: 100px;height: 50px;background: orange;margin: 0 auto;}
</style>

<!-- HTML结构 -->
<div>
    <p></p>
</div>

レンダリング：

小概要：それは中心付近のインライン要素のために、インライン要素は、幅と高さを設定することができないことに留意しなければならないので、内容がなければならない、コンテンツ伸延サイズのインライン要素、コンテンツがテキストことができ、ここ写真cneter;そうインライン要素を中心達成するために、親要素の内部を追加し、ブロックをセンタリングするための要素、ブロック;テキスト整列を必要cneter：インラインテキストテキストアラインとして使用する素子に相当要素のような無内容できますが、その幅を持っている必要があり、marginプロパティボックスモデルを使用して、マージンプロパティボックスとボックス、そのマージンの間の距離である：0自動;あなたは、要素自体を追加する必要があります。ここでは、あまりにも、私たちは質問のためにそれを拡張することができ、インライン要素を中心に、我々が最初に使用することができ、変換後の属性の表示要素の型を、要素は、多くの場合に使用中心に達成するために高い幅、なるように添加されたシミュレーションボタン要素を。

垂直（上下）中心

最初の方法：

まず、必要にする表示サブ要素を設定：インラインブロック（ニーズが高いためにより広くすると、横方向に配置された保証）
と、同じテキストの整列（垂直）垂直整列を使用する：中間、それはvertical-にここに必要です縦整列縦書きテキストの配置、フォント、正中線、ベースライン、ボトム合わせ私たちは、「基準線」私たちを助けるために必要があるので、「参照」の一番上の行に応じて行われる：ALIGN属性説明トップラインは、正中線、ベースライン、ボトム、サブエレメントの背後にある同じレベル（セット表示：インラインブロック）インライン要素を追加するかどうかを決定し、ラップ、次のサブ要素を入れないと、「基準線0に中央幅、100％の高さを設定します「OK正中、属性垂直整列を加えます。
ぶっきらぼうに「基準線」は高いと親コンテナを使用して作成された「目に見えないコンテナ。」次のように具体的なコードは次のとおりです。

<!-- css样式 -->
<style>
    div{width: 600px;height: 100px;background: pink;}
    em{width: 100px;height: 50px;background: orange;display:inline-block;vertical-align: middle;}
    span{width:0;height:100%;display:inline-block;vertical-align: middle;}
</style>

<!-- HTML结构 -->
<div class="box">
    <em></em><span></span>
</div>

図影響：

注：使用して、基準線法は、親コンテナのセンタリングのバルク子要素にも等しく適用可能です！

この方法を実現することができる中心に結合垂直方向と水平方向中心に、具体的なコードは次の通りであります：

<!-- css样式 -->
<style>
    div{width: 600px;height: 100px;background: pink;text-align: center;}
    em{width: 100px;height: 50px;background: orange;display:inline-block;vertical-align: middle;}
    span{width:0;height:100%;display:inline-block;vertical-align: middle;}
</style>

<!-- HTML结构 -->
<div>
    <em></em><span></span>
</div>

レンダリング：

第二の方法：

位置決め（位置）を達成することにより、垂直方向と水平方向のセンタリングは、バルク要素（dsiplay変換素子タイプ）にも適用可能である
特定のコードは次の通りであります：

<!-- css样式 -->
<style>
    div{width: 600px;height: 100px;background: pink;position: relative;}
    p{width: 100px;height: 50px;background: orange;/* display:inline-block; */position:absolute;top:0;bottom:0;margin:auto;}       
</style>

<!-- HTML结构 -->
<div>
    <p></p>
</div>

レンダリング

第三の方法：

ディスプレイの使用：フレックスと、弾性ボックスを達成するために、垂直方向と水平方向中心に
次のように特定のコードは次のとおりです。

<!-- css样式 -->
<style>
    div{width: 600px;height: 100px;background: pink;display: flex;/* 形成弹性盒子 */}
    p{width: 100px;height: 50px;background: orange;margin:auto;}       
</style>

<!-- HTML结构 -->
<div>
    <p></p>
</div>

レンダリング

の問題は、すべてのCSS要素を中心に、ここで？いいえ！！！

                                                                        后续将会持续添加，敬请关注！