元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

目录

一、实现方式

1、利用定位 + margin:auto

2、利用定位 + margin:负值

3、利用定位 + transform

4、table布局

5、flex弹性布局

6、grid网格布局

7、小结

二、总结

1、内联元素居中布局

2、块级元素居中布局

---

我们在制作页面的时候，经常需要把元素进行水平垂直居中，所以今天主要介绍行内元素和块级元素水平垂直居中的多种方法，供大家选择运用。

一、实现方式

• 利用定位 + margin:auto
• 利用定位 + margin:负值
• 利用定位 + transform
• table布局
• flex布局
• grid布局

1、利用定位 + margin:auto

父级设置为相对定位，子级设置为绝对定位，并且四个定位属性（top、left、bottom、right）的值都设置为0。

• 如果子级没有设置宽高，则会被拉开到和父级一样的宽高
• 如果子级设置宽高，则会按照设置的宽高来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候在给它一个 margin:auto 它就可以上下左右都居中了

2、利用定位 + margin:负值

父级元素设置为相对定位，子级元素移动自身50%实现水平垂直居中

• 不要求父元素的高度，即使父元素的高度变化了，仍然可以保持在父元素的垂直居中的位置，水平方向上操作一样
• 但是需要知道子元素自身的宽高
• （ 可以通过transform属性进行移动 ）

3、利用定位 + transform

transform(-50%，-50%) 会将元素位移自己宽度和高度的 -50%

• 这种方法和margin负值用法一样，可以说是margin负值的替代方案
• 不需要知道自身元素的宽高

4、table布局

设置父元素为 display:table-cell ，子元素设置为 display:inline-block 。

利用 vertical 和 text-align 可以让所有的行内块级元素水平垂直居中

5、flex弹性布局

flex布局可以非常简单的实现垂直水平居中

flex布局的关键属性作用：

• display:flex 时，表示该容器内部的元素将按照flex进行布局
• align-items:center 表示这些元素将相对于本容器水平居中
• justify-content:center 表示这些元素将相对于本容器垂直居中

6、grid网格布局

跟flex布局相似

7、小结

不知道元素宽高大小仍能实现水平垂直居中的方法有：

• 利用定位 + margin:auto
• 利用定位 + transform
• flex布局
• grid布局

二、总结

根据元素标签的性质，可以分为：

• 内联元素居中布局
• 块级元素居中布局

1、内联元素居中布局

水平居中

• 行内元素可设置：text-align:center
• flex布局设置父元素：diaplay:flex justify-content:center

垂直居中

• 单行文本父元素确认高度：height == line-height
• 多行文本父元素确认高度：diaplay:table-cell vertical-align:middle

2、块级元素居中布局

水平居中

• 定宽：margin:0 auto
• 绝对定位 + left：50% + margin：负自身一半

垂直居中

• position:absolute 设置 left、top、margin-left、margin-top（定高）
• display:table-cell
• transform:translate(x,y)
• flex（不定宽高）
• grid（不定宽高），兼容性相对比较差