CSS 的各种居中方式总结

  • A+
所属分类:前端开发

通过 CSS(层叠样式表)将页面中的元素居中显示是前端在开发的时候经常性遇到的问题,也是基本的技能之一,目前包括水平居中、垂直居中及水平垂直居中,今天我就把一些常用到的解决方案整理一下,算作自己对基本知识的梳理。

一、水平居中

1、行内元素水平居中
行内元素也叫内联元素、内嵌元素、直进式元素等,可以利用 text-align: center 可以实现在块级元素内部的内联元素水平居中

  1. .center {
  2.     text-aligncenter;
  3. }

此方法对内联元素(inline)、内联块(inline-block)、内联表(inline-table)、inline-flex 元素水平居中都有效
2、块级元素水平居中(固定宽度)
通过把固定宽度块级元素的 margin-left 和 margin-right 设成 auto,就可以使块级元素水平居中

  1. .center {
  2.     width100px;
  3.     margin: 0 auto;
  4. }

3、块级元素水平居中(不固定宽度)
在实际工作中我们会遇到需要为“不固定宽度的块级元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性
有三种方法可以对不固定宽度的块级元素进行居中:
A、方法一
将要显示的元素加入到 table 标签中,然后为 table 标签设置“左右margin”值为“auto”来实现居中;
或使用 display : table,然后设该元素“左右margin”值为“auto”来实现居中,这种方法更简洁
这样的目的是利用 table 标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的 margin 的方法,使其水平居中

  1. .center {
  2.     display: table;
  3.     margin: 0 auto;
  4. }

B、方法二
改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后父级元素使用 text-align:center 来实现居中效果。

  1. .container {
  2.     text-aligncenter;
  3. }
  4. .center {
  5.     displayinline;
  6. }

但是这样会有一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,就无法设定块级元素的宽度值(变成 inline-block 就可以设置宽高)
C、方法三
通过给父元素设置 float,然后给父元素设置 position: relative 、 left: 50% 和清除浮动 clear: both,子元素设置 position: relative 和 left: -50% 来实现水平居中,用绝对定位也是可以的

  1. .wrap{
  2.     floatleft;
  3.     positionrelative;
  4.     left: 50%;
  5.     clearboth;
  6. }
  7. .wrap-center{
  8.     positionrelative;
  9.     left: -50%;
  10. }

D、方法四
利用弹性布局(flex),实现水平居中,其中 justify-content 用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式

  1. .flex-center {
  2.     display: flex;
  3.     justify-contentcenter;
  4. }

二、垂直居中

1、单行文本的行内元素垂直居中
通过设置父行内元素的 height 和 line-height 高度相等,来实现元素垂直居中

  1. .warp {
  2.     height120px;
  3.     line-height120px;
  4. }

2、多行文本的行内元素垂直居中
A、方法一
将要显示的元素加入到 table 标签中,然后为 table 标签设置 vertical-align:middle 来实现居中;
或使用 display : table,然后设该元素 vertical-align:middle 来实现居中,这种方法更简洁

  1. .warp {
  2.     display: table;
  3.     vertical-alignmiddle;
  4. }

B、方法二
设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性,但这种方法兼容性比较差, IE6、7 并不支持这个样式

  1. .wrap {
  2.     displaytable-cell/*IE8以上及Chrome、Firefox*/
  3.     vertical-alignmiddle/*IE8以上及Chrome、Firefox*/
  4. }

C、方法三
利用 flex 布局实现垂直居中,其中 flex-direction: column 定义主轴方向为纵向,因为 flex 布局是CSS3 中定义,在较老的浏览器存在兼容性问题

  1. .flex-wrap {
  2.     display: flex;
  3.     flex-direction: column;
  4.     justify-contentcenter;
  5. }

3、块级元素垂直居中
A、方法一
知道居中元素的高度和宽度,可以通过绝对定位元素距离顶部50%,并设置 margin-top 向上偏移元素高度的一半,就可以实现垂直居中了

  1. .parent {
  2.     positionrelative;
  3. }
  4. .child {
  5.     positionabsolute;
  6.     top: 50%;
  7.     height100px;
  8.     margin-top: -50px;
  9. }

B、方法二
垂直居中的元素的高度和宽度未知时,可以借助 CSS3 中的 transform 属性向Y轴反向偏移50%的方法实现垂直居中,但是部分浏览器存在兼容性的问题

  1. .parent {
  2.     height140px;
  3.     positionrelative;
  4. }
  5. .child {
  6.     positionabsolute;
  7.     top: 50%;
  8.     transform: translateY(-50%);
  9. }

三、水平垂直居中

1、固定宽高元素水平垂直居中
通过 margin 平移元素整体宽度的一半,使元素水平垂直居中

  1. .parent {
  2.     height140px;
  3.     positionrelative;
  4. }
  5. .child {
  6.     width200px;
  7.     height100px;
  8.     positionabsolute;
  9.     top: 50%;
  10.     left: 50%;
  11.     margin: -50px 0 0 -100px;
  12. }

2、未知宽高元素水平垂直居中
利用2D变换,在水平和垂直两个方向都向反向平移宽高的一半,从而使元素水平垂直居中

  1. .parent {
  2.     height140px;
  3.     positionrelative;
  4. }
  5. .child {
  6.     positionabsolute;
  7.     top: 50%;
  8.     left: 50%;
  9.     transform: translate(-50%, -50%);
  10. }

3、利用 flex 布局
利用flex布局,其中 justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式;而 align-items 属性定义 flex 子项在 flex 容器的当前行的侧轴(纵轴)方向上的对齐方式

  1. .parent {
  2.     display: flex;
  3.     justify-contentcenter;
  4.     align-items: center;
  5. }

4、利用 grid 布局
利用 grid 实现水平垂直居中,兼容性较差,不推荐

  1. .parent {
  2.   height140px;
  3.   display: grid;
  4. }
  5. .child {
  6.   marginauto;
  7. }

5、屏幕上水平垂直居中
屏幕上水平垂直居中十分常用,常规的登录及注册页面都需要用到,要保证较好的兼容性,还需要用到表布局

  1. .outer {
  2.     display: table;
  3.     positionabsolute;
  4.     height: 100%;
  5.     width: 100%;
  6. }
  7. .middle {
  8.     displaytable-cell;
  9.     vertical-alignmiddle;
  10. }
  11. .inner {
  12.     margin-leftauto;
  13.     margin-rightauto;
  14.     width400px;
  15. }
  16. <div class="outer">
  17.     <div class="middle">
  18.         <div class="inner">
  19.             <p>
  20.                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio perspiciatis quisquam provident asperiores. Accusamus eligendi, tempore architecto minus itaque maiores, recusandae sint nostrum quod, eaque voluptas harum asperiores sunt dolorem.
  21.             </p>
  22.         </div>
  23.     </div>
  24. </div>

注意:CSS3 的 flex,transform,grid 等内容都存在浏览器的兼容性问题!

博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • 苏州会计网 苏州会计网 来自天朝的朋友 江苏省苏州市 移动 1

      测试测试