程序亦非猿

16中方法实现水平居中垂直居中

2018/06/05 Share

水平居中

1、若是行内元素，给父元素设置 text-align:center; 既可以实现行内水平居中

2、若是块级元素，该元素设置 margin：0 auto； 即可

3、若是子元素包含，float:left 属性，为了让子元素水平居中，则可以让父元素宽度设置成 fit-content ，并配合 margin ，作如下设置：

1
2
3
4
5
6
.parent {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width:fit-content;
    margin:0 auto;
}

fit-content 是 CSS3 中给 width 属性新加的一个属性值,它配合 margin 可以轻松实现水平居中, 目前只支持Chrome 和 Firefox 浏览器

4、使用 flex 2012 版本布局，可以轻松的实现水平居中，子元素设置如下

1
2
3
4
.demo {
    display: flex;
    justify-content: content;
}

5、使用flex 2009年版本, 父元素 display: box; box-pack: center; 如下设置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.parent {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    display: -o-box;
    -o-box-orient: horizontal;
    -o-box-pack: center;
    display: -ms-box;
    -ms-box-orient: horizontal;
    -ms-box-pack: center;
    display: box;
    box-orient: horizontal;
    box-pack: center;
}

6、使用 CSS3 中新增的 transform 属性，子元素设置如下：

1
2
3
4
5
.demo {
    position:absolute;
    left:50%;
    transform:translate(-50%,0);
}

7、使用绝对定位方式，以及负值的 margin-left ，子元素设置如下

1
2
3
4
5
6
.demo {
    position:absolute;
    width:固定;
    left:50%;
    margin-left:-0.5宽度;
}

8、使用绝对定位方式, 以及 left:0; right:0; margin:0 auto; 子元素设置如下:

1
2
3
4
5
6
7
.demo {
    position:absolute;
    width:固定;
    left:0;
    right:0;
    margin:0 auto;
}

垂直居中

  • 单行文本：

    1、若是元素为单行文本，则可设置 line-height 等于父级的高度

  • 行块内元素：

    1、若是行内块元素，基本思想是使用 display: inline-block，vertical-align: middle 和一个伪元素让内容处于容器中央

    1
    2
    3
    4
    5
    6
    7
    8
    .parent::after, .demo {
        display:inline-block;
        vertical-align:middle;
    }
    .parent::after {
        content:'';
        height:100%;
    }

    这是一种很流行的方法, 也适应IE7.

  • 元素高度不定

    1、可用 vertical-align 属性, 而 vertical-align 只有在父层为 td 或者 th 时， 才会生效，对于其他块级元素，例如 div、p 等, 默认情况是不支持的. 为了使用 vertical-align， 我们需要设置父元素 display:table，子元素 display:table-cell; vertical-align:middle;

    优点：

    元素高度可以动态改变, 不需再 CSS 中定义, 如果父元素没有足够空间时, 该元素内容也不会被截断.

    缺点：

    IE6~7, 甚至IE8 beta中无效

    2、可用 Flex 2012版, 这是 CSS 布局未来的趋势， Flexbox 是 CSS3 新增属性, 设计初衷是为了解决像垂直居中这样的常见布局问题. 相关的文章如《弹性盒模型Flex指南》

    父元素做如下设置即可保证子元素垂直居中:

    1
    2
    3
    4
    .parent {
      display: flex;
      align-items: center;
    }
    优点：
    • 内容块的宽高任意, 优雅的溢出
    • 可用于更复杂高级的布局技术中
    缺点：
    • IE8/IE9 不支持
    • 需要浏览器厂商前缀
    • 渲染上可能会有一些问题

    3、使用 flex 2009版

    1
    2
    3
    4
    5
    .parent {
          display: box;
          box-orient: vertical;
          box-pack: center;
    }
    优点：

    实现简单, 扩展性强

    缺点：

    兼容性差, 不支持 IE

    4、可用 transform , 设置父元素相对定位 (position:relative)，子元素如下 css 样式

    1
    2
    3
    4
    5
    6
    7
    .demo {
        position:absolute;
        top:50%;
        -webkit-transform: translate(-50%,-50%);  
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
    优点：

    代码量少

    缺点：

    IE8 不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象

  • 元素高度固定

    1、设置父元素相对定位 (position:relative)， 子元素如下 css 样式:

    1
    2
    3
    4
    5
    6
    .demo {
        position:absolute;
        top:50%;
        height:固定;
        margin-top:-0.5高度;
    }
    优点：

    适用于所有浏览器.

    缺点：

    父元素空间不够时, 子元素可能不可见(当浏览器窗口缩小时,滚动条不出现时).如果子元素设置了overflow:auto, 则高度不够时, 会出现滚动条

    2、设置父元素相对定位 (position:relative)， 子元素如下 css 样式:

    1
    2
    3
    4
    5
    6
    7
    .demo {
        position:absolute;
        height:固定;
        top:0;
        bottom:0;
        margin:auto 0;
    }
    优点：

    简单

    缺点：

    没有足够的空间时，子元素会被截断，不会有滚动条

    总结：

    水平居中较为简单, 共提供了 8 种方法，一般情况下 text-align:center，marin:0 auto; 足矣

    • ① text-align:center;
    • ② margin:0 auto;
    • ③ width:fit-content;
    • ④ flex
    • ⑤ 盒模型
    • ⑥ transform
    • ⑦ ⑧ 两种不同的绝对定位方法

    垂直居中, 共提供了8种方法

    • ① 单行文本，line-height
    • ② 行内块级元素, 使用 display: inline-block， vertical-align: middle;加上伪元素辅助实现
    • ③ vertical-align
    • ④ flex
    • ⑤ 盒模型
    • ⑥ transform

    • ⑦ ⑧ 两种不同的绝对定位方法

      我们发现，flex， 盒模型， transform， 绝对定位， 这几种方法同时适用于水平居中和垂直居中

    希望对大家有所帮助

    本文作者：A-D

    参考文章：http://louiszhai.github.io/2016/03/12/css-center/

CATALOG
  1. 1. 水平居中
  2. 2. 垂直居中
    1. 2.0.1. 优点：
    2. 2.0.2. 缺点：
    3. 2.0.3. 优点：
    4. 2.0.4. 缺点：
    5. 2.0.5. 优点：
    6. 2.0.6. 缺点：
    7. 2.0.7. 优点：
    8. 2.0.8. 缺点：
    9. 2.0.9. 优点：
    10. 2.0.10. 缺点：
    11. 2.0.11. 优点：
    12. 2.0.12. 缺点：
  • 3. 总结：
    • Archive Tag
    Total : 39
    2019
    2018
    Invalid date
    2018
    减肥