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 水平居中