CSS实现元素居中N种办法 ——比较全，附上 demo
<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><span style="color: black;">保藏</span>。</p>
<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>元素居中的实现方式<span style="color: black;">尤其</span>多，网上<span style="color: black;">哪些</span>整理的<span style="color: black;">亦</span>比较乱，就准备自己动手整理一下。影响元素居中的<span style="color: black;">原因</span><span style="color: black;">非常多</span>，<span style="color: black;">区别</span>元素类型、<span style="color: black;">是不是</span>设置宽高、<span style="color: black;">区别</span>实现方式「常规的，position、flex」、<span style="color: black;">区别</span>居中类型「水平、垂直、水平垂直」<span style="color: black;">各样</span>组合加起来起码有十几种。<span style="color: black;">区别</span>的实现方式浏览器兼容<span style="color: black;">亦</span>有差异。<span style="color: black;">因此</span>好好整理一下还是<span style="color: black;">特别有</span>必要的。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">测试环境：浏览器：chrome 91.0.4472.124 兼容性<span style="color: black;">区别</span>浏览器会存在差异，兼容性后面有时间补上</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">文案</span>的demo，<span style="color: black;">已然</span>发送到 github，<span style="color: black;">必须</span>预览效果的<span style="color: black;">能够</span>拉一下代码 ———<a style="color: black;">「元素居中的N种<span style="color: black;">办法</span>」</a>！ 觉得还不错，记得点个赞喔</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">水平居中</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">text-align: center</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">适用：行内元素</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><style>
.inline-box{
height: 300px;
width: 300px;
border: 1px solid black;
text-align: center; //<span style="color: black;">重要</span>代码
}
</style>
<div class="inline-box">
<!-- 行内元素 -->
<span>行内元素水平居中</span>
<!-- 行内块级元素 -->
<img src="logo.jpg">
</div></div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">margin: 0 auto</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">适用：块级元素，已设置宽高</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><style>
.block-box {
float: left;
height: 300px;
width: 300px;
border: 1px solid black;
}
/* 已设置宽度 */
.block-content-1 {
width: 100px;
height: 100px;
bac<span style="color: black;">公斤</span>round-color: cadetblue;
margin: 0 auto; //<span style="color: black;">重要</span>代码
}
/* 没设置宽度 ，默认占满一行，<span style="color: black;">无</span>水平居中<span style="color: black;">道理</span>*/
.block-content-2 {
bac<span style="color: black;">公斤</span>round: #fba6a6;
}
</style>
<div class="block-box">
<div class="block-content-1">设置宽度，水平居中</div>
<div class="block-content-2">没设宽度默认占满一行，<span style="color: black;">不必</span>水平居中</div>
</div></div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">margin-left</h3>
<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;">人工计算居中的位置，父元素宽为 300px ，子元素宽 100px , <span style="color: black;">那样</span> margin-left 设置为 50 px <span style="color: black;">就可</span>。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">display: table-cell + text-algin: center</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">适用：行内元素</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.table-cell-box {
height: 300px;
width: 300px;
border: 1px solid black;
display: table-cell;
text-align: center;
}
<div class="table-cell-box">
<span>table-cell 设置宽度，水平居中</span>
</div></div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">position + left: 0 + right: 0 + margin: auto</h3>
<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;">.position-margin-box {
position: relative;
}
.position-margin-box * {
position: absolute;</div>
一看到楼主的气势，我就觉得楼主同在社区里灌水。 感谢您的精彩评论，为我带来了新的思考角度。 我完全同意你的看法，期待我们能深入探讨这个问题。 你的话深深触动了我，仿佛说出了我心里的声音。
页:
[1]