我是孩子2,我要水平居中
プロジェクトでは、要素を水平方向と垂直方向の中央に配置する必要があることがよくあります。また、具体的なシナリオも異なりますので、視聴者の参考になればと思い、個人的なまとめ方をまとめておきます。
以下に示す例はすべて HTML に基づいており、いくつかの一般的なスタイルがここで指定されています。
body { background-color: #efefef; } main { background-color: #fff; padding: 10px; margin:10px 0px; } main p { background-color: #aaf; }
例:
.parent1 { text-align:center; } .child1 { display:inline|inline-block; }
.child2 { width:60%; margin:auto; } 我是孩子2,我要水平居中
.parent4 { display: flex; justify-content: center; } .child4 { margin:10px; } 我是孩子4,我要水平居中
我是孩子4,我要水平居中
我是孩子4,我要水平居中
を使用して、line-heightとheightの値を同じ値に設定することもできます
.child5 { height:50px; line-height: 50px; } 我是孩子5,我要垂直居中
.parent6 { display: table; } .child6 { display: table-cell; border:2px solid #000; vertical-align: middle; } 我是孩子6,我要垂直居中
我是孩子6,我要垂直居中
我是孩子6,我要垂直居中
/*如果知道子元素宽高*/ .parent7 { position: relative; height: 100px; } .child7 { position: absolute; top:50%; height:60px; margin-top:-30px; } /*如果不知道子元素宽高*/ .parent7 { position: relative; height: 100px; } .child7 { position: absolute; top:50%; transform: translateY(-50%); } 我是孩子7,我要垂直居中
.parent8 { height: 200px; display: flex; flex-direction: column; justify-content: center; } 我是孩子8,我要垂直居中
/*如果不知道子元素宽高*/ .parent9 { position: relative; height: 150px; } .child9 { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); } /*如果知道子元素宽高*/ .parent9 { position: relative; height: 150px; } .child9 { position: absolute; top:50%; left:50%; height:60px; width:100px; margin-left:-50px; margin-top:-30px; } 我是孩子9,我要水平垂直居中
.parent10 { height: 200px; display: flex; flex-direction: column; justify-content: center; } .child10 { margin: auto; }
CSSの水平方向と垂直方向の中央揃え方法のまとめ関連記事の詳細については、PHP中国語Webサイトに注目してください。