html+css 实现元素水平与垂直居中效果方法汇总

html+css 实现元素水平与垂直居中效果方法集合

布局分类

一.水平居中布局

效果图：

1）display.inline-block + text-align:center

利用 display:inlin-block 将元素设置为具有文本元素的性质，然后利用文本对齐属性 text-align 来设置对齐方式，center 即为水平对齐

2）定位 + transform:translate

transform: translateY(-50%) 实现元素垂直居中效果
transform:translate(-50%,-50%)实现水平垂直居中
通过position absolute和top 50%，结合transform产生效果。

父元素开启相对定位，子元素设置绝对定位，left 设置为 50%，再使用 transform: translateX(-50%)将子元素往反方向移动自身宽度的 50%，便完成水平居中。

3）.display:block + margin:0 auto

通过对子元素设置便可以实现水平居中，设置 margin 为 auto 表示浏览器自动分配，实现外边距等分

二、垂直居中布局

效果图：

1.定位 + transform：translateY(-50%)

与水平居中第二种方法相同的原理，利用 top 为 50%，再设置 transform：translateY(-50%),既可以实现垂直居中

2.在父元素中设置display:table-cell + vertical-align:middle

通过设置 display：table-cell 使元素具有 td 元素的行为，使得子元素具有类似文本元素的布局方式，然后在父元素中设置 vertical-align:middle,实现元素的垂直居中

三、水平垂直居中布局

效果图：

1.定位+transform

父元素开启定位，子元素设置绝对定位，left 设置为 50%，top 设置为 50%，再使用 transform: translate(-50%，-50%)将子元素往反方向移动自身宽度的 50%，便完成水平垂直居中。

2.结合水平布局 3，垂直布局 2

3.flex 布局

使用 flex 布局(display:flex)，align-items:center 垂直居中 ，justify-content:center 水平居中