|
文案适合「前端新人」和「巩固基本的前端切图仔」，整理得比较全，意见保藏。
这阵子在准备面试，复习有些基本知识，发掘元素居中的实现方式尤其多，网上哪些整理的亦比较乱，就准备自己动手整理一下。影响元素居中的原因非常多，区别元素类型、是不是设置宽高、区别实现方式「常规的，position、flex」、区别居中类型「水平、垂直、水平垂直」各样组合加起来起码有十几种。区别的实现方式浏览器兼容亦有差异。因此好好整理一下还是特别有必要的。
测试环境：浏览器：chrome 91.0.4472.124 兼容性区别浏览器会存在差异，兼容性后面有时间补上
文案的demo，已然发送到 github，必须预览效果的能够拉一下代码 ———「元素居中的N种办法」！ 觉得还不错，记得点个赞喔
水平居中
text-align: center
适用：行内元素
<style>
.inline-box{
height: 300px;
width: 300px;
border: 1px solid black;
text-align: center; // 重要代码
}
</style>
<div class="inline-box">
<!-- 行内元素 -->
<span>行内元素水平居中</span>
<!-- 行内块级元素 -->
<img src="logo.jpg">
</div> margin: 0 auto
适用：块级元素，已设置宽高
<style>
.block-box {
float: left;
height: 300px;
width: 300px;
border: 1px solid black;
}
/* 已设置宽度 */
.block-content-1 {
width: 100px;
height: 100px;
bac 公斤round-color: cadetblue;
margin: 0 auto; // 重要代码
}
/* 没设置宽度 ，默认占满一行， 无水平居中 道理*/
.block-content-2 {
bac 公斤round: #fba6a6;
}
</style>
<div class="block-box">
<div class="block-content-1">设置宽度，水平居中</div>
<div class="block-content-2">没设宽度默认占满一行， 不必水平居中</div>
</div> margin-left
适用: 块级元素，已知高度
人工计算居中的位置，父元素宽为 300px ，子元素宽 100px , 那样 margin-left 设置为 50 px 就可。
display: table-cell + text-algin: center
适用：行内元素
.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>
position + left: 0 + right: 0 + margin: auto
适用：行内和块级元素都适用，必须设置宽度
.position-margin-box {
position: relative;
}
.position-margin-box * {
position: absolute;
| 
发表于 2024-6-30 09:47:56
楼主