常用居中技巧 ?
小于 1 分钟
- 行内元素、行内块元素,可以被父元素当做文本处理
即:可以像处理文本对齐一样,去处理:行内、行内块在父元素中的对齐。
例如:text-align、line-height、text-indent等。
如何让子元素,在父亲中水平居中:
- 若子元素为块元素,给父元素加上:
margin:0 auto;。 - 若子元素为行内元素、行内块元素,给父元素加上:
text-align:center。
- 若子元素为块元素,给父元素加上:
如何让子元素,在父亲中垂直居中:
- 若子元素为块元素,给子元素加上:margin-top,值为:(父元素
content- 子元素盒子总高)/2。 - 若子元素为行内元素、行内块元素
让父元素的height=line-height,每个子元素都加上:vertical-align:middle;。
补充:若想绝对垂直居中,父元素font-size设置为0。
- 若子元素为块元素,给子元素加上:margin-top,值为:(父元素