CSS垂直居中、水平居中
让一个div或一段文字也或一张照片居中表示的问题，面试的过程中亦经常被问到。相信大众都平常的布局亦经常会用到，回答出个三两种处理方法也不是难事。但今天我细究了一下，发掘还有新大陆可寻，特意留此博文总结一下，与君分享！倘若你有新的办法，欢迎弥补！
咱们先从固定宽高的div起始
为方便演示，默认宽高各为100px的div
<div class="wrapper">
<div class="content"></div>
</div>
以下方式所有是水平及垂直居中
办法一：padding填充
.content{
margin: 0 auto;
padding: 50px;
width: 100px;
height: 100px;
bac公斤round-color: red;
}
优点：兼容性非常好
缺点：倘若父级的高度受到兄弟节点的影响，这般自己就不居中了
办法二：绝对定位
.wrapper{
position: relative;
}
.content{
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
bac公斤round-color: red;
}
优点：兼容性非常好
缺点：必须提前晓得div的宽高，实用性偏弱
办法三：计算属性（calc）
margin: calc((100% - 100px) / 2);
width: 100px;
height: 100px;
bac公斤round-color: red;
优点：感觉不到有什么优点
缺点：不仅必须提前晓得div的宽高，况且浏览器对calc的属性支持程度不一，会有兼容问题。不举荐运用，意见做为认识
接下来是不固定宽高的div
为方便演示，还是默认宽高各为100px的div
办法四：absolute + margin: auto;
.wrapper{
position: relative;
}
.content{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
bac公斤round-color: red;
}
优点：不必须提前晓得尺寸，兼容性好
缺点：暂时无什么要说的，可能理解起来比较麻烦吧
解析：
1、咱们先让content脱离文档流，而后设置上右下左四个位置均为0
2、给它固定宽高，限制体积
3、利用margin属性，均分外边距
办法五：absolute + transform
.content{
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
transform: translate(-50%,-50%);
bac公斤round-color: red;
}
优点：除了不消提前晓得体积好似亦没什么了
缺点：兼容性偏弱
办法六：父级flex布局
.wrapper{
display: flex;
justify-conte
| 
发表于 2024-6-30 05:54:46
