元素居中解决方案

html:

<div class="parent">

    <div class="son"></div>

</div>

css:
1水平居中：
解决方案1：

.parent { text-align: center } 

.son { display: inline-block; }

解决方案2：

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

解决方案3：

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

2垂直居中：
解决方案1：

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

解决方案2：

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

3水平垂直居中：
解决方案1：

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

.son { display: inline-block; }

解决方案2：

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

解决方案3：

.parent { position: relative; left: 0; top: 0; } 

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