CSS垂直居中、水平居中-外链论坛 - Powered by Discuz! Archiver

5ep9lzv 发表于 2024-6-30 05:54:46

CSS垂直居中、水平居中

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

m5k1umn 发表于 2024-10-4 14:14:36

你说得对，我们一起加油，未来可期。

4zhvml8 发表于 2024-10-12 23:42:23

外链发布社区 http://www.fok120.com/

nqkk58 发表于 2024-10-23 16:22:47

你说得对，我们一起加油，未来可期。

m5k1umn 发表于 2024-10-31 01:53:50

你的话深深触动了我，仿佛说出了我心里的声音。

qzmjef 发表于 2024-11-12 06:10:23

祝福你、祝你幸福、早日实现等。

nqkk58 发表于 4 天前

“NB”（牛×的缩写，表示叹为观止）‌

页: [1]

外链论坛's Archiver

CSS垂直居中、水平居中