元素水平、垂直居中方法汇总
-
一、行内元素
1、行内元素的特点：
①总是和相邻的行内元素在同一行上
②设置宽高无效，水平的padding和margin有效，垂直方向无效
③默认宽度是它内容的宽度
④行内元素只能容纳其他行内元素和文本内容
2、行内元素的水平、垂直居中
①通过vertical-align
<--vertical-align:middle 是依赖div内子元素最高的行高来实现对某元素居中的，而我们只需要建立一个新元素，给他加上inline-block属性 再把他高度设置为100%就行了,在下面的<img>设置vertical-align就生效了-->
②flex布局
③position:absolute;绝对定位方式
④使用display:table-cell配合vertical-align:center
二、块级元素
1、块级元素的特点：
①独占一行
②可设置宽高和padding、margin
③不设置宽度默认100%
④可容纳其他块元素和行内元素
2、块级元素水平垂直居中方法：
①已知宽高
②宽高未知
方法一：绝对定位配合margin：auto
方法二：绝对定位配合css3属性transform
方法三：flex布局