布局一

CSS 常见的布局之单列布局

水平居中

水平居中的页面布局是常见的一种布局形式，下面各个实例是基于 child 元素的对其操作， child 元素的父容器是 parent 元素。

• 使用 inline-block 和 text-align 实现

  • 优点：兼容性好；不足： 需要同时设置子元素和父元素

    .parent{text-align: center;}
    .child{display: inline-block;}
    

• 使用 margin: 0 auto 来实现

  • 优点： 兼容性好； 不足： 需要指定宽度

    .child{width: 200px; margin: 0 auto;}

• 使用 table 实现

  • 优点： 只需要对自身进行设置，不足 IE6 需要调整结构

    .child{display： table; margin: 0 auto;}
    

• 使用绝对定位实现

  • 不足： 兼容性差。IE9 以上才可以使用

     .parent{postition: relative;}
     .child{position: absolute; left: 50%; transform: translate(-50%);}
    

• 实用 flex 布局实现

  • 缺点： 兼容性差，如果进行大面积布局可能会影响效率

    /*第一种方法*/
    .parent{display:flex; justify-content:center;}
    /*第二种方法*/
    .parent{display:flex;}
    .child{margin:0 auto;}
    

垂直居中

• vertical-align

  /* 第一种方法 */
  .parent{display: table-cell; vertial-align:middle; height: 20px;}
  /* 第二种方法 */
  .parent{display:inline-block;vertical-align:middle;line-height:20px;}
  

• 使用绝对定位

  .parent{position: relative;}
  .child{position:absolute; top: 50%; transform:translate(0,-50%);}
  

• 使用 flex 实现

  .parent{display:flex; align-items:center;}

水平垂直全部居中

• 利用 vertical-align, text-align, inline-block 实现

  • 优点：兼容性好；不足：需要同时设置子元素和父元素

    .parent{display:table-cell; vertical-align:middle; text-align:center;}
    .child{display:inline-block;}
    

• 利用绝对定位实现

  .parent{position:relative;} 
  .child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
  

• 利用 flex 实现

  .parent{display:flex;justify-content:center;align-items:center;}