绝对居中六法

01.负外边距(Negative Margins)

基本思路: 首先,将设置了绝对定位的子元素水平和垂直偏移50%;然后,在水平和垂直方向分别偏移负自身宽高的一半


  .parent{position:relative}
  .son{position: absolute;left: 50%;top: 50%}
  .cont{width: 100%;height: 150px;margin-left: -50%; margin-top: -75px}
优点:
  • 兼容性好,IE6都能完美兼容,移动端更是不在画下.
  • 代码量少.
不足:
  • 子元素的宽高值需要确定,这对于高度自适应容器是个问题.
  • 最好将盒子设置box-sizing:border-box,因为偏移值是依据content+padding值来确定.

02.负位移(Transforms/Translate)

基本思路: 首先,将设置了绝对定位的子元素水平和垂直偏移50%;然后,通过CSS3 transform属性值将子元素偏移负自身宽高的一半


  .parent{position:relative}
  .son{position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);}
优点:
  • 支持子容器高度自适应;适用于响应式布局环境.
  • 移动浏览器支持较好
  • 代码量少.
不足:
  • 不支持IE8及以下IE浏览器.
  • 需要添加浏览器私有前缀.
  • translate可能受transform其他子属性值影响.
  • 要注意添加transform-style: preserve-3d优化渲染性能.

03.表格块(Table-Cell)

基本思路: 通过设置display:table/table-cell相关属性,模拟表格布局.


  .parent{display:table}
  .son{display:table-cell;vertical-align:middle}
  .cont{width:50%;height:50%;margin:auto}
优点:
  • 支持高度自适应,可适用于响应式环境.
  • 适用于多个子元素水平垂直居中环境.
  • 兼容性良好,移动浏览器基本都兼容display:table/table-cell及相关属性.
不足:
  • 需要额外标签.

04.行内块(Inline-Block)

基本思路: 首先,将子容器设置行内块和任一伪元素也设置为行内块及水平居中;然后对父容器设置文本居中即可


  .parent{text-align:center;overflow:auto}
  .parent:after{content:'';display:inline-block;vertical-align:middle;height:100%;width:0}
  .son{display:inline-block;vertical-align:middle}
优点:
  • 支持子元素高度自适应.
  • 适用于多个子元素水平垂直居中环境.
  • 兼容性良好,IE7+支持.
不足:
  • 当存在多个子容器时,注意盒子之间的间隙.

05.伸缩盒模型(Flexbox)

基本思路: 使用CSS3新添加的flexbox弹性盒模型相关属性,分分钟设置一个、多个子盒子的水平/垂直居中、对齐、等高


  .parent{display: flex; align-items: center; justify-content: center;}
优点:
  • 不需要设置子元素的高度、宽度.
  • 适用于任意子元素水平垂直居中环境.
  • 提供更加开阔和便捷的布局思想;代码量少.
不足:
  • IE10+才兼容,高级浏览器也部分存在兼容问题.
  • 需要添加浏览器私有前缀.
  • 可能存在性能问题(不确定).

06.绝对居中块(Absolute Centering)

基本思路: 结合设置子元素外边距auto及四个方向的偏移值为0达到水平垂直居中的目的


	  .parent{position:relative}
	  .son{width:50%;height:50%;margin:auto;position: absolute;top:0;right:0;left:0;bottom:0;}
	
优点:
  • 支持IE8+,兼容性良好.
  • 代码量少,标签结构简单.
  • 宽高值通过设置为%,适用于响应式环境.
不足:
  • 高度必须定义.

对于此种布局方式,此文 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术讲的很是透彻。

07.外插入一个空元素&利用浮动


#floater{background-color:#ccc;float:left; margin-bottom:-100px;height:50%;}
.content{clear:both;height:200px;position:relative;width:60%;margin:auto;}
	
优点:
  • 适用于大多浏览器(包括IE8+)
  • 没有足够的空间时(Eg:窗口缩小)Content不会被截断,滚动条出现
不足:
  • 需要额外的空元素
  • 用到了浮动(如果对于不好此属性者,也算不足)

08.line-height与height齐飞

欲把西湖比西子,淡妆浓抹总相宜。

莫道不消魂,独弄键盘,人比黄花瘦。 深夜把码黎明后,有咸香盈袖。 真可谓:天堂有路你不走,学海无涯苦作舟。 饶上个:一入'哀啼'深似海,从此'逍遥'没长'苏'。

.content{height: 10em;line-height:10em;}
	
优点:
  • 适用于大多浏览器(包括IE8+)
  • 无足够空间时不会被截断
不足:
  • 只对文本有效(块级元素无效)
  • 多行时,断词比较糟糕~如上效果,额