css实现水平垂直居中

时间：2019-01-21 11:15:45 阅读：149 评论：0 收藏：0 [点我收藏+]

未知宽高

1、把父元素设置成table，子元素为table-cell，然后用vertical-align：center

优点：父元素可以改变高度

缺点：IE8以下不支持，且对img无效果

2、用一个空标签并设置vertical-align的基准线为中间，并让它inline-block，宽为0，高度100%

缺点：多了没用的空标签，且转为行内块

IE6、7不支持（可用_zoom：1；*display：inline解决兼容）

3、让该元素的父元素line-height=height，并转成行内块，在vertical-align

缺点：只适用于HTML5

已知宽高

给父元素相对定位，子元素绝对定位

1、绝对定位；margin：auto；top：0；left：0；bottom：0；right：0；

2、绝对定位；top：50%；向上移动高的一半（负数）

left：50%；向左移动宽的一半（负数）

3、绝对定位；top：50%；left：50%；transform：translate（-50%，-50%）

已知或未知

给父元素body加（display：flex；justify-content：center；align-items：center）

给html、body加（height：100%）

原文地址：https://www.cnblogs.com/tis100204/p/10297117.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行