CSS3 对齐方式 （十五）

CSS3 对齐方式 （十五）

标签（空格分隔）： 前端学习

---

参考原文
水平居中
(1)行内元素水平居中
如果被设置元素为文本、图片等行内元素时，在父元素中设置text-align: center实现行内元素水平居中，将子元素中的display设置为inline-block，使子元素变成行内元素。

(2)块状元素的水平居中(不定定度)
给“不确定宽度的块级元素”设置居中，可以直接给不定宽的块级元素设置text-align: center来实现，也可以给其父元素添加text-align: center来实现居中效果。
当不定宽块级元素不要独占一行时，可以设置display为inline或inline-block。

垂直居中
首先要设定父元素是盒子容器并且高度已经设定

(1)子元素是行内元素，高度由其内容撑开
可以通过设定父元素的line-height为其高度(即line-height和height值相同)来使得其子元素居中
ps:line-height属性设置行间距(行高)，不允许使用负值，可使用百分比、像素和数值。

(2)子元素是块级元素但是子元素高度没有设定。
可以通过给父元素设定display: table-cell; vertical-align: middle来解决

(3)子元素是块级元素且高度已经设定
计算子元素的margin-top或margin-bottom，计算方法为(父元素高度-子元素高度)/2

水平垂直居中
(1)水平对齐+行高
通过text-align+line-height实现单行文本水平垂直居中。

(2)水平+垂直对齐
1.text-align+vertical-align 在父元素设置text-align: center和vertical-align: middle，并将父元素设置为table-cell元素，子元素设置为inline-block元素

2.若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align: middle

(3)相对+绝对定位
使用absolute，利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin: auto