css居中总结

  css居中是布局中常见的方法,现将常用方法总结如下:

1.水平居中
1.1.使用inline-block + text-align

(1)原理:先将子元素由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中

(2)用法:对子元素设置display:inline-block,对父框设置text-align:center
css居中总结_第1张图片
水平布局1.png

(3)优缺点
  • 优点:兼容性好,甚至可以兼容ie6、ie7
  • 缺点:child里的文字也会水平居中,可以在.child添加text-align:left;
1.2使用table+margin

(1)原理:先将子元素设置为块级表格来显示(类似

),再设置子元素居中以达到水平居中。

(2)用法:对子元素设置display:table,再设置margin:0 auto。
css居中总结_第2张图片
水平布局2.png

(3)优缺点:
  • 优点:只设置了child,ie8以上都支持
  • 缺点:不支持ie6、ie7,将div换成table
1.3使用absolute+transform

(1)原理:将子元素设置为绝对定位,移动子元素,使子元素左侧距离父元素左侧边框的距离为父元素宽度的一半,再通过向左移动子元素的一半宽度以达到水平居中。当然,在此之前,我们需要设置父元素为相对定位,使父元素成为子元素的相元素。
(2)用法:对父框设置position:relative,对子框设置position:absolute,left:50%,transform:translateX(-50%)


css居中总结_第3张图片
水平布局3.png

(3)优缺点:

  • 优点:居中元素不会对其他的产生影响
  • 缺点:transform属于css3内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀
1.4使用flex+justify-content

(1)原理:通过CSS3中的flex中的justify-content属性来达到水平居中
(2)用法:先将父框设置为display:flex,再设置justify-content:center


css居中总结_第4张图片
水平布局4.png

(3)优缺点

  • 优点:设置parent即可
  • 缺点:低版本浏览器(ie6 ie7 ie8)不支持
2.垂直居中
2.1使用table-cell+vertical-align

(1)原理:通过将父框转化为一个表格单元格显示(类似

),再通过设置属性,使表格单元格内容垂直居中以达到垂直居中。
(2)用法:先将父框设置为display:table-cell,再设置vertical-align:middle。


css居中总结_第5张图片
垂直居中1.png

(3)优缺点

  • 优点:兼容性较好,ie8以上均支持
2.2使用absolute+transform

(1)原理:类似于水平居中时的absolute+transform原理。将子元素设置为绝对定位,移动子元素,使子元素上边距离相对框上边边框的距离为相对框高度的一半,再通过向上移动子框的一半高度以达到垂直居中。当然,在此之前,我们需要设置父元素为相对定位,使父元素成为子元素的相对元素。
(2)用法:先将父元素设置为position:relative,再设置子元素position:absolute,top:50%,transform:translateY(-50%)


css居中总结_第6张图片
垂直居中2.png

(3)优缺点

  • 优点:居中元素不会对其他的产生影响
  • 缺点:transform属于css3内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀
2.3使用flex+align-items

(1)原理:通过设置CSS3中的布局利器flex中的属性align-times,使子框垂直居中。
(2)用法:先将父框设置为position:flex,再设置align-items:center。


css居中总结_第7张图片
垂直居中3.png

(3)优缺点

  • 优点:只设置parent
  • 缺点:兼容性存在一定问题
3.水平垂直居中
3.1使用inline-block+text-align+table-cell+vertical-align

(1)原理:使用inline-block+text-align水平居中,再用table-cell+vertical-align垂直居中,将二者结合起来。详见:水平居中的1)和垂直居中的1)
(2)用法:见水平居中的1)和垂直居中的1)


css居中总结_第8张图片
水平垂直居中.png

(3)优缺点

  • 优点:兼容性较好
3.2使用absolute+transform

(1)原理:将水平居中时的absolute+transform和垂直居中时的absolute+transform相结合。详见:水平居中的3)和垂直居中的2)
(2)用法见水平居中的3)和垂直居中的2)


css居中总结_第9张图片
水平垂直居中2.png

(3)优缺点

  • 优点:child元素不会对其他元素产生影响
  • 缺点:兼容性存在一定问题/strip%7CimageView2/2/w/1240)
3.3使用flex+justify-content+align-items

(1)原理:通过设置CSS3布局利器flex中的justify-content和align-items,从而达到水平垂直居中。详见:水平居中的4)和垂直居中的3)。
(2)见水平居中的4)和垂直居中的3)。


css居中总结_第10张图片
水平垂直居中3.png

(3)优缺点

  • 优点:只设置了parent
  • 缺点:兼容性存在一定问题

4.总结
居中的方式有很多实现方式,总结一些常用的,欢迎指正
代码地址

你可能感兴趣的:(css居中总结)