表示方式を表、display:table-cell、同時にvertial-align:middle とする.
はflexのレイアウトを用いる、align-item：center に設定されている.
絶対位置決めにはbottom:0,top:0が設ける、margin:auto が設けられている.
絶対位置決めで高さを固定する場合top:50%margin-topの値が高さの半分の負の値を設定.
テキスト垂直中央設定line-heightはheight値である.
単行テキストの場合、line-heightは、heightの値に設定.
.vertical {
height: 100px;
line-height: 100px;
}
高さのブロックレベルのサブ要素が知られており、絶対位置決めと負のエッジピッチを採用している.
.container {
position: relative;
}
.vertical {
height: 300px; /* */
position: absolute;
top:50%; /* 50%*/
margin-top: -150px; /* */
}
未知の高さのブロックレベルの親子要素が中央に位置し、シミュレーションテーブルレイアウト欠点:IE67互換性なし、親overflow：hidden失効.container {
display: table;
}
.content {
display: table-cell;
vertical-align: middle;
}
inline-block兄弟元素を追加し、vertical-align を設置する.
欠点:追加のラベルを追加する必要があります.IE67はと互換性がありません.
.container {
height: 100%;/* ， */
}
.extra .vertical{
display: inline-block; /* */
vertical-align: middle; /* */
}
.extra {
height: 100%; /* 100%*/
}
絶対位置決め係合CSS3変位.vertical {
position: absolute;
top:50%; /* 50%*/
transform:translateY(-50%, -50%);
}
CSS3エラストマーボックスモデル.container {
display:flex;
justify-content: center; /* */
align-items: center; /* */
}