• CSS居中布局

    CSS居中布局在实际开发中是经常使用的一种布局方式,同时也是面试中会问的基础CSS布局中常见的问题之一。

    水平居中

    元素的宽未知

    方法1.1: text-align:center,适合的元素通常为文档流中的内联元素,例如span,a,img,input等等.

    1
    2
    3
    .parent {
      text-align: center;
    }
    • 优点：简单快捷，容易理解，兼容性非常好
    • 缺点：只对行内内容有效；属性会继承影响到后代行内内容：如果子元素宽度大于父元素宽度则无效.

    方法1.2: text-align:center,适合的元素通常为文档流中的内联元素,将块级元素转换为inline

    1
    2
    3
    4
    5
    6
    .parent{
      text-align: center;
    }
    .son{
      display: inline-block; 
    }

    方法2.1: 定位+CSS3 transform

    1
    2
    3
    4
    5
    6
    7
    8
    .parent {
      position: relative;
    }
    .son {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    • 优点：简单快捷，容易理解，不管是块级还是行内元素都可以实现
    • 缺点：代码较多；脱离文档流；使用transform兼容性不好（ie9+）

    方法2.2: 定位+margin:0,auto

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .parent {
      position: relative;
    }
    .son {
      position: absolute;
       100px;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
    • 优点：简单快捷，容易理解，不管是块级还是行内元素都可以实现
    • 缺点：代码较多；脱离文档流；使用transform兼容性不好（ie9+）

    方法3: flex布局

    1
    2
    3
    4
    .parent {
      display: flex;
      justify-content: center;
    }
    • 优点：功能强大；简单方便；容易理解，适用于子元素为浮动，绝对定位，内联元素，均可水平居中。
    • 缺点：PC端兼容性不好，移动端（Android4.0+）

    元素的宽已知

    方法1: margin:0 auto,适合单个块级元素,在margin有节余的同时如果左右margin设置了auto，将会均分剩余空间.

    1
    2
    3
    4
    .son{
       100px; /*必须定宽*/
      margin: 0 auto;
    }
    • 优点：简单快捷，容易理解，兼容性非常好
    • 缺点：必须定宽，并且值不能为auto；宽度要小于父元素，否则无效.

    方法2: margin-left.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .parent{
      height: 200px;
       200px;
      position: relative;
    }
    .son{
      position: absolute;
      left: 50%;
      margin-left: -50px;
       100px;
      height: 100px;
    }
    • 优点：使用margin-left兼容性好；不管是块级还是行内元素都可以实现
    • 缺点：代码较多；脱离文档流；使用margin-left需要知道宽度值；

    垂直居中

    元素的高未知

    方法1: 定位+CSS3 transform

    1
    2
    3
    4
    5
    6
    7
    8
    .parent {
      position: relative;
    }
    .son {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    • 优点：简单快捷，容易理解，不管是块级还是行内元素都可以实现
    • 缺点：代码较多；脱离文档流；使用transform兼容性不好（ie9+）

    方法2.1: flex布局

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

    方法2.2: flex布局

    1
    2
    3
    4
    5
    6
    .parent{
      display: flex;
    }
    .son{
      align-self: center;
    }
    • 优点：功能强大；简单方便；容易理解，适用于子元素为浮动，绝对定位，内联元素，均可水平居中。
    • 缺点：PC端兼容性不好，移动端（Android4.0+）

    元素的高已知

    方法1.1: line-height,文字内容公用水平中垂线.

    1
    2
    3
    4
    .parent{
      height: 150px;
      line-height: 150px;  /*与height等值*/
    }
    • 优点：简单快捷，容易理解，兼容性非常好
    • 缺点：只能用于单行行内内容；要知道高度的值

    方法1.2: line-height.

    1
    2
    3
    4
    .parent{  /*或者用span把所有文字包裹起来，设置display:inline-block转换成图片的方式解决*/
      height: 150px;
      line-height: 30px;  /*元素在页面呈现为5行,则line-height的值为height/5*/
    }
    • 优点：简单；兼容性好
    • 缺点：只能用于行内内容；需要知道高度和最终呈现多少行来计算出line-height的值，建议用span包裹多行文本

    方法2: margin:auto 0.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .parent{
      position: relative;
    }
    .son{
      position: absolute;
      margin: auto 0;
      top: 0;
      bottom: 0;
      height: 50px;
    }
    • 优点：简单；兼容性好
    • 缺点：脱离文档流

    方法3: 定位+CSS3 transform

    1
    2
    3
    4
    5
    6
    7
    8
    .parent {
      position: relative;
    }
    .son {
      position: absolute;  /*子绝*/
    大专栏  CSS居中布局/>  top: 50%;  /*父元素高度一半,这里等同于top:75px;*/
      transform: translateY(-50%);  /*自身高度一半,这里等同于margin-top:-25px;*/
    }
    • 优点：简单快捷，容易理解，不管是块级还是行内元素都可以实现
    • 缺点：代码较多；脱离文档流；使用transform兼容性不好（ie9+）

    方法4: 定位+tabel-cell

    1
    2
    3
    4
    .parent{
        display: table-cell;
        vertical-align: middle;
    }
    • 优点：简单快捷，容易理解，兼容性好（ie8+）
    • 缺点：设置tabl-cell的元素，宽度和高度的值设置百分比无效，需要给它的父元素设置display: table; 才生效；table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height；设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性；内容溢出时会自动撑开父元素

    方法5: margin-top.

    1
    2
    3
    4
    5
    6
    7
    8
    .son {
       100px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
    }
    • 优点：使用margin-top兼容性好；不管是块级还是行内元素都可以实现
    • 缺点：灵活性差，不能自适应，宽高不支持百分比尺寸和 min-/max- 属性

    水平垂直居中

    行内元素

    行内元素,行内块级元素:text-align: center; 控制行内内容相对于块父元素水平居中,然后就是line-height和vertical-align使其垂直居中，font-size: 0; 是为了消除近似居中的bug

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .parent{
      height: 150px;
      line-height: 150px;  /*行高的值与height相等*/
      text-align: center;
      font-size: 0;   /*消除幽灵空白节点的bug*/
    }
    .son{
      /*display: inline-block;*/  /*如果是块级元素需改为行内或行内块级才生效*/
      vertical-align: middle;
    }
    • 优点：代码简单；兼容性好（ie8+）
    • 缺点：只对行内内容有效；需要添加font-size: 0; 才可以完全的垂直居中；不过需要注意html中#parent包裹#son之间需要有换行或空格；熟悉line-height和vertical-align的基友关系较难

    table-cell方法

    CSS Table，使表格内容垂直对齐方式为middle,然后根据是行内内容还是块级内容采取不同的方式达到水平居中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .parent{
      height: 150px;
       200px;
      display: table-cell;
      vertical-align: middle;
      /*text-align: center;*/   /*如果是行内元素就添加这个*/
    }
    .son{
       100px;
      height: 50px;
      /*margin: 0 auto;*/    /*如果是块级元素就添加这个*/
    }
    • 优点：代码简单；兼容性好（ie8+）
    • 缺点：设置tabl-cell的元素，宽度和高度的值设置百分比无效，需要给它的父元素设置display: table; 才生效；table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height；设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性；内容溢出时会自动撑开父元素

    绝对定位

    方法1: 定位+CSS3 transform

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .parent{
      position: relative;
    }
    .son{
      position: absolute;
      top: 50%;
      left: 50%;
      /*定宽高时等同于margin-left:负自身宽度一半;margin-top:负自身高度一半;*/
      transform: translate(-50%,-50%);
    }
    • 优点：不管是块级还是行内元素都可以实现
    • 缺点：代码较多；脱离文档流；使用transform兼容性不好（ie9+）

    方法2: 定位+margin

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .parent{
      position: relative;
    }
    .son{
      100px;
      height:100px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left:50px;
      margin-right:50px;
    }
    • 优点：兼容性好；
    • 缺点：代码较多；脱离文档流；需要知道宽高;灵活性差，不能自适应，宽高不支持百分比尺寸和 min-/max- 属性

    绝对居中

    当top、bottom为0时,margin-top&bottom设置auto的话会无限延伸占满空间并且平分；当left、right为0时,margin-left&right设置auto的话会无限延伸占满空间并且平分

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .parent{
      position: relative;
    }
    .son{
      position: absolute;
      margin: auto;
       100px;
      height: 50px;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
    • 优点：无需关注宽高；兼容性较好(ie8+)
    • 缺点：代码较多；脱离文档流

    flex方法

    方法1：

    1
    2
    3
    4
    5
    6
    .parent{
      display: flex;
    }
    .son{
      margin: auto;
    }

    方法2：

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

    方法3：

    1
    2
    3
    4
    5
    6
    7
    .parent{
      display: flex;
      justify-content: center;
    }
    .son{
      align-self: center;
    }
    • 优点：简单灵活；功能强大
    • 缺点：PC端兼容性不好，移动端（Android4.0+）
  • 相关阅读:
    HDOJ_2709_Sumsets
    HDOJ_2012_素数判定
    HDOJ_2011_大二写_水仙花树
    HDOJ_2010_大二写_水仙花数
    HDOJ_1290_大二写_献给杭电五十周年校庆的礼物
    HDOJ_2047_阿牛的EOF牛肉串
    HDOJ_2041_大二写_超级电梯
    HDOJ_2044_大二写_一只小蜜蜂...
    HDOJ_2046_骨牌方格_大二写
    HDOJ 2013_大二写
  • 原文地址：https://www.cnblogs.com/lijianming180/p/12239811.html
Copyright © 2020-2023  润新知