Web前端基础（十）：CSS实现水平垂直居中的方式

一、用display：table-cell；vertical :middle；

把第一个div转换为单元格形式，然后进行居中；

二、position和margin水平垂直居中；

设置绝对定位—position：absolute; 找到最近的那个position属性；

三、空标签

如果是行元素作为空标签需要浮动（也要清浮动），这样可以更改行元素的宽高；块元素可以不设置浮动；

四、 padding-top设置水平垂直居中

 1、制作过程：
      1）在body中书写两个嵌套的div，父级选择“wrap”样式；子级选择“box”样式；
      2）给父级的样式设置背景色，设置纵向的内边距padding-top和padding-bottom；注意：父级容器不能设置宽高！
      3）设置子级的宽度、背景色，并且设置水平居中—margin: 0 auto; 设置padding-top和padding-bottom来使得子级在父级中水平垂直居中。
 2、优缺点：
      优点：支持文本与非文本；也支持块元素
      缺点：父容器不能设置高度。

五、position水平垂直居中

六、关于line-height属性

1. 单行文字：line-height：行高等于高度;—>文字垂直居中；text-align：center; —水平居中；
2. 图片：line-height：行高等于高度;—>文字垂直居中; text-align：center; —水平居中；需要清除5px—display: block;