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

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

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

水平居中方法：

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

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

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

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

图片：

首先是图片，在选择方法之