2024年最新垂直水平居中小技巧_inline-block不设置高度如何垂直居中

咳咳，下面是正式内容，以我们最常见的网页为例

上图网页中，红框部分内的左右元素都是水平居中显示的，其中既有大小不一的文本又有图片，面对这种情况只要我们解决其中一个，另外三个就很简单了，那么这一个我们应该怎么处理呢

水平居中方法：

对于元素水平居中常用我们有二种办法：

方法一：text-align:center文本在容器里水平居中，让inline与inline-block在容器里水平居中，text-align添加给父元素。

方法二：margin: 0 aut0; 让一个有宽度的块元素在容器（父元素）里水平居中，margin: 0 auto添加给当前元素。

（除此之外如果知道详细的布局数据。也可以根据情况手动设置margin或padding等元素调整，不过不建议使用，有毒副作用）

图片：

首先是图片，在选择方法之前，我们应该知道图片的类型是inline-block类型，在选用方法时对于经常使用方法二的人就需要注意，margin: 0 auto;的适用对象是有宽度的块元素，图片本身自然有宽度，但并不是块元素，需要先将其通过display: block；将图片转化为块元素才能使用方法二。

相比而下，方法一就很简单了，无需转化元素类型，直接在父元素内使用该属性即可。

文本：

其次是文本，文本的嵌套既有使用inline类型父元素嵌套的，又有使用block类型嵌套的。针对不同的情况，我们选用的方法也不同。

1. 嵌套inline类型的父元素，若想水平居中则在父元素下添加text_align:center;
2. 嵌套block类型的父元素，若想水平居中则在本身元素下添加margin: 0 auto;

垂直居中方法：

方法一：line-height：行高高度等于容器高度，只能实现单行文本在容器里垂直居中，line-height添加给容器。

方法二：vertical-align: middle;使一个inline-block类型的元素垂直居中。

**方法三：**通过定位，为需要垂直居中的元素设置absolute类型的定位，然后给父元素设置relative类型的定位，然后

top:0;                                                 
left:0;                                 
right:0;                               
bottom:0;                          
margin:auto;

或者：

top:50%;                                   
left:50%;
margin:-NNpx 0 0 -NNpx;           
/*NN为元素宽高的一半**/

即可。

方法二有毒，需要4个条件！！！

写在最后

在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。

需要完整版PDF学习资源私我

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！