CSS中的9种居中办法
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">办法</span>1：gird布局</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">父级元素display设置grid，主轴和副轴设置为center。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box{
display: grid;
align-items: center;
justify-items: center;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>2：justify-content替换justify-items</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在<span style="color: black;">办法</span>1的<span style="color: black;">基本</span>上，用justify-content替换justify-items<span style="color: black;">能够</span>取得相同效果</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box{
display: grid;
align-items: center;
justify-content: center;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>3:</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">父级display设置为grid，子元素的margin为auto。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box{
display: grid;
}
p{
margin: auto;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>4：</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span>flex布局<span style="color: black;">得到</span>居中效果，设置父元素display为flex，和<span style="color: black;">办法</span>1<span style="color: black;">同样</span>，<span style="color: black;">运用</span>align-items: center; justify-content: center;</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box{
display: flex;
align-items: center;
justify-content: center;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>5：</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">父元素<span style="color: black;">运用</span>flex布局，子元素设置margin:auto; </p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box{
display: flex;
}
p{
margin: auto;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>6：</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设置子元素垂直居中，用text-align属性让文本水平居中，在子元素上设置inline-block。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这种<span style="color: black;">办法</span>并不常用 </p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box{
display: table-cell;
vertical-align:middle;
text-align:center;
}
p{
display:inline-block;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>7：</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">设置父元素为relative，再设置子元素为absolute，左边和上边偏移50%，实现居中。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box{
position: relative;
}
p{
position: absolute;
left: 50%;
top: 50%;
transfrom: translate(-50%,-50%);
margin: 0;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>8：</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">父元素，text-align:center,<span style="color: black;">运用</span>伪元素::after为盒子开头形成空字符串。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">设置行高为盒子的高度，<span style="color: black;">而后</span>子元素display：inline-block.</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box{
width: 200px;
height: 200px;
text-align: center;
}
.box::after{
content: ;
line-height: 200px;
}
p{
display: inline-block;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>9：</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">已然</span>弃用，但<span style="color: black;">亦</span>能实现居中，不<span style="color: black;">举荐</span>。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box{
position: relative;
}
p{
width: 100px;
height: 40px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}</div>
说得好啊！我在外链论坛打滚这么多年，所谓阅人无数，就算没有见过猪走路，也总明白猪肉是啥味道的。
页:
[1]