8种垂直水平居中方法

方法1: 文本或者图片

line-height: 高度；
text: center;

方法2: 子元素position: absolute; margin: auto;

.parent {
    positon: relative;
}

.son {
    width: 固定；
    height: 固定；
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

<div class='parent'>
    <div class='son'>sfsfsds</div>
</div>

优点：

1.支持跨浏览器，包括IE8-IE10.

2.无需其他特殊标记，CSS代码量少

3.支持百分比%属性值和min-/max-属性

4.只用这一个类可实现任何内容块居中

5.不论是否设置padding都可居中（在不使用box-sizing属性的前提下）

6.内容块可以被重绘。

7.完美支持图片居中。

缺点：

1.必须声明高度（查看可变高度Variable Height）。

2.建议设置overflow:auto来防止内容越界溢出。（查看溢出Overflow）。

3.在Windows Phone设备上不起作用。

浏览器兼容性：

Chrome,Firefox, Safari, Mobile Safari, IE8-10.

绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过

方法3: 子元素position: absolute; margin: 半负值

.parent {
    positon: relative;
}

.son {
    width: 固定；
    height: 固定；
    position: absolute;
    top: -0.5高度;
    right: 0;
    bottom: 0;
    left: -0.5宽度;
}

<div class='parent'>
    <div class='son'>sfsfsds</div>
</div>

方法4: 父元素定高

.parent {
    height: 100px;
    padding-top: 20px;
}

.son {
    width: 60px;
    height: 60px;
    margin: 0 auto;
}

<div class='parent'>
    <div class='son'>sfsfsds</div>
</div>

方法5: 父元素flex布局

.parent {
    height: 100px;
    justify-content: center;
    align-items: center;
}


<div class='parent'>
    <div class='son'>sfsfsds</div>
</div>

方法6: 子元素position: absolute; 在利用translate

.parent {
  position: relative;
}

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

<div class='parent'>
    <div class='son'>sfsfsds</div>
</div>

方法7: 父元素display: table;

.parent {
  display: table;
}

.son {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div class='parent'>
    <div class='son'>sfsfsds</div>
</div>

方法8: 父元素display: flex; 子元素margin: auto;

.parent {
  display: flex;
}

.son {
  margin: auto;
}

<div class='parent'>
    <div class='son'>sfsfsds</div>
</div>

代码例子