css垂直居中的方法

css垂直居中的方法

方法一：

父元素相对定位{position:relative;}

子元素绝对定位{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;}

方法二：

父元素设置{ position: relative; }

子元素设置{ position: absolute; top: 50%; left: 50%; transform: translate: (-50%, 50%) }

方法三

父元素设置{ position: relative; }

中间元素{ position: absolute; top: 50%; left: 50%; }

子元素{ position: relative; top: -50%; left: -50% }

方法四

父元素设置{ display: flex; align-items: center; }

方法五

---

line-height/height设置为等值

方法六

父元素设置{ padding: xxpx; height: auto !important;}

/* 当有高度不固定的内容时. */

方法七

父元素设置{ display: table-cell; vertical-align: middle; }

/* 缺点元素宽度不能设置为百分比, 可以为固定像素值 */

方法八

父元素设置{ display: flex; align-items: center; }

/* 运用了flex布局, 同时使用css3的属性align-items, 兼容性较差 */