Web ページ要素の CSS センタリングを実装するための完全な戦略_html/css_WEB-ITnose

水平方向のセンタリング: インライン要素のソリューション

ブロックとして属性表示を持つ親要素でインライン要素をラップし、次の属性を親要素に追加するだけです:

.parent {    text-align:center;}

水平方向のセンタリング: 形状要素へのブロック ソリューション

.item {    /* 这里可以设置顶端外边距 */    margin: 10px auto;}

水平方向のセンタリング: 複数のブロック要素の解決策
要素の表示属性を inline-block に設定し、親要素の text-align 属性を center に設定します:

.parent {    text-align:center;}

水平方向のセンタリング: 複数のブロック要素の解決策複数のブロック要素 (フレックスボックス レイアウトを使用して実装)
フレックスボックス レイアウトを使用すると、処理するブロック要素の親要素に属性 display:flex と justify-content:center を追加するだけで済みます:

.parent {    display:flex;    justify-content:center;}

垂直中央揃え:単一行のインライン要素ソリューション

うろ覚え

垂直中央揃え: 複数行のインライン要素ソリューション
中央揃えが必要な要素を定義するには、display:table-cell 属性とvertical-align:middle 属性を組み合わせて使用​​します親コンテナ要素は次のような効果を生成します:

.parent {    background: #222;    height: 200px;}/* 以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */a {    height: 200px;    line-height:200px;     color: #FFF;}

垂直センタリング: 高さが既知のブロック要素のソリューション

.parent {    background: #222;    width: 300px;    height: 300px;    /* 以下属性垂直居中 */    display: table-cell;    vertical-align:middle;}

垂直センタリング: 高さが不明なブロック要素のソリューション

.item{    top: 50%;    margin-top: -50px;  /* margin-top值为自身高度的一半 */    position: absolute;    padding:0;}

水平および垂直センタリング: すでに解決高さと幅が既知の要素の場合は 1
これは、次のような適応性があり、解決策 2 よりもスマートな珍しいセンタリング方法です:

.item{    top: 50%;    position: absolute;    transform: translateY(-50%);  /* 使用css3的transform来实现 */}

水平方向と垂直方向のセンタリング: 高さと幅が既知の要素の解決策 2

.item{    position: absolute;    margin:auto;    left:0;    top:0:    right:0;    bottom:0;}

水平方向と垂直方向のセンタリング: 不明な高さと幅の要素の解決策

.item{    position: absolute;    top: 50%;    left: 50%;    margin-top: -75px;  /* 设置margin-left / margin-top 为自身高度的一半 */    margin-left: -75px;}

水平方向と垂直方向のセンタリング: フレックス レイアウトを使用して

.item{    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */}