行盒(行块盒)水平居中
直接设置行盒(行块盒)的父元素text-align: center
块盒水平居中(定宽)
- 设置左右margin为auto
- 设置父元素相对定位, 然后设置目标块盒绝对定位, 并且
left: 50%, 以及margin-left: -(元素宽度的一半) - 设置父元素相对定位, 然后设置目标块盒绝对定位, 并且
left: 50%, 以及transform: translate(-50%)
块盒水平居中(不定宽)
- 子元素默认占满父元素包含块, 此时需要设置子元素为
display: inline-block, 再给父元素设置text-align: center - 设置父元素相对定位, 然后设置子元素绝对定位, 并且
left: 50%, 以及transform: translate(-50%)
使用flexbox布局, 不管是否定宽, 都可实现水平居中
给父元素设置display: flex; justify-content: center即可
单行文本垂直居中
设置文本所在元素的line-height等于区域的高度
多行的行盒垂直居中
给父元素设置display: table-cell; vertical-align: middle即可
块盒垂直居中
类似块盒水平居中, 略
水平垂直都居中(顶宽高)
是水平垂直居中的结合, 略
网友评论