CSS布局方案——居中布局

水平居中

• 假设有HTML如下：

<div class="parent">
    <div class="child">这里都是child不定宽高的解决方案</div>
</div>

• 方案一：inline-block + text-align
  • CSS代码：

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

  • 优点：方法简单，兼容性也不错。
  • 缺点：1、text-align:center会导致文本也居中，可能需要额外处理；2、IE7-不支持inline-block，可以用*display:inline和*zoom:1模拟。
• 方案二：table + margin
  • CSS代码：

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

  • 优点：只需要设置child，兼容性也不错。
  • 缺点：IE7-不支持display:table，可以把HTML结构换成table。
  • PS：可以将display:table换成display:inline-block。
• 方案三：position + translate
  • CSS代码：

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

  • 优点：绝对定位元素脱离文档流，因此该居中的元素不会对其他元素产生影响。
  • 缺点：transform是CSS3属性，因此IE8-不支持，而且不同的浏览器需要加上其私有前缀。
• 方案四：flex + justify-content
  • CSS代码：

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

  • 优点：只需要设置parent。
  • 缺点：IE8-不支持flex。
  • PS：可以把justify-content:center换成margin:0 auto。

垂直居中

• 假设有HTML如下：

<div class="parent">
    <div class="child">这里都是child不定宽高的解决方案</div>
</div>

• 方案一：table-cell + vertical-align
  • CSS代码：

  .parent{ display:table-cell; vertical-align:middle; }
  

  • 优点：1、方法简单，兼容性也不错；2、只需要设置parent。
  • 缺点：IE7-不支持display:table-cell，可以把HTML结构换成table。
  • PS：vertical-align只能用于行内元素和table元素。
• 方案二：position + translate
  • CSS代码：

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

  • 优缺点：参考水平居中布局的方案三。
• 方案三：flex + align-items
  • CSS代码：

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

  • 优点：只需要设置parent。
  • 缺点：1、IE8-不支持flex；2、IE10-不支持align-items，且不同浏览器要加私有前缀。
  • PS：可以把parent中align-items:center去掉，在子元素中添加align-self:center，但IE10-也不支持align-self。

水平垂直居中

• 假设有HTML如下：

<div class="parent">
    <div class="child">child不定宽高</div>
</div>

• 方案一：水平居中的方案一+垂直居中的方案二

.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%); }

• 方案三：水平居中的方案四+垂直居中的方案三

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

• 方案四：position + margin
  • CSS代码：

  .child{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
  

  • 优点：兼容性强。
  • 缺点：必须声明width和height