CSS中，垂直居中的九种写法
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">第1</span>种：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">利用grid布局，把父级设置为grid，<span style="color: black;">而后</span>设置主轴和副轴为居中，实现垂直居中。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box1 {
width: 200px;
height: 200px;
border: 1px solid;
display: grid;
align-items: center;
justify-items: center;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第二种：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">把父级设置为grid，<span style="color: black;">而后</span>设置主轴和副轴为居中，<span style="color: black;">运用</span>justify-content，实现垂直居中。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box2 {
width: 200px;
height: 200px;
border: 1px solid;
display: grid;
align-items: center;
justify-content: center;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第三种：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">把父级设置为grid，<span style="color: black;">而后</span>在子元素里设置外边距：margin：auto； 实现垂直居中</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box3 {
width: 200px;
height: 200px;
border: 1px solid;
display: grid;
}
.box3 > p {
bac<span style="color: black;">公斤</span>round: green;
margin: auto;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">第四种：</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">把父级设置为flex，<span style="color: black;">而后</span>继续<span style="color: black;">运用</span>align-items 和justify-content，实现垂直居中。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box4 {
width: 200px;
height: 200px;
border: 1px solid;
display: flex;/*同grid*/
align-items: center;
justify-content: center;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">第五种：</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">把父级设置为flex，<span style="color: black;">而后</span>在子元素中设置margin:auto;实现垂直居中。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box5 {
width: 200px;
height: 200px;
border: 1px solid;
display: flex;
}
.box5 > p {
bac<span style="color: black;">公斤</span>round: grey;
margin: auto;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">第六种：</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">把父级设置为display:table-cell;，<span style="color: black;">而后</span>用vertical-align属性让子元素垂直居中，<span style="color: black;">而后</span>用text-align属性让文本水平居中，最后在子元素上设置inline-block，实现垂直居中。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.wrapper {
display:table;
width:200px;
}
.box6 {
height:200px;
border: 1px solid;
display:table-cell;
vertical-align: middle;
text-align: center;
}
.box6 > p {
bac<span style="color: black;">公斤</span>round: orange;
display: inline-block;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">第七种：</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">设置父级为相对定位，再设置子元素为绝对定位，在内部向左/向上迁移50%，实现垂直居中。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box7 {
width: 200px;
height: 200px;
border: 1px solid red;
position:relative;/*为p的内容定位*/
}
.box7 > p {
position: absolute;
left: 50%;
top: 50%;
bac<span style="color: black;">公斤</span>round: pink;
transform: translate(-50%,-50%);
margin: 0;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">第八种</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">设置父系为文本水平居中，<span style="color: black;">而后</span>设置伪元素::after，设置行高为父系盒子<span style="color: black;">同样</span>的高度，最后给子元素设置inline-block，实现垂直居中。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box8 {
width: 200px;
height: 200px;
border: 1px solid;
</div>
外贸B2B平台有哪些？ 期待与你深入交流，共探知识的无穷魅力。 论坛的成果是显著的，但我们不能因为成绩而沾沾自喜。 可以发布外链的网站 http://www.fok120.com/
页:
[1]