CSS元素（文字、圖片）水平垂直居中方法
1、text-align:center;
2、margin:0 auto;
3、display:inline-block; + text-align:center;
4、position:relative; + float:left;
5、line-height
6、上下左右padding
7、position:absolute; + margin:auto;
8、position:absolute; + 負margin
9、position:absolute; + calc()
10、table-cell + vertical-align + inline-block + text-align
11、偽元素 + vertical-align + inline-block + text-align
12、position:absolute; + transform:translate(-50%, -50%);
13、display:flex;
14、background-position:center;
15、writing-mode
1、text-align:center;
父容器上設定text-align:center; 用於設定為行內元素的水平居中
<style> p{ background-color:#f00; text-align:center; } </style> <p>居中</p>
2、margin:0 auto;
元素自身設定margin:0 auto; 用於設定為塊級元素的水平居中（元素寬度固定，且不能浮動、絕對定位）
<style> div{ background-color:#099; } p{ width:100px; height:100px; margin:0 auto; background-color:#f00; } </style> <div><p></p></div>
3、display:inline-block; + text-align:center;
用於設定為內聯塊元素的水平居中（元素不能浮動、絕對定位，注意清除inline-block引起的下邊空白）
<style> div{ background-color:#099; text-align:center; } p{ display:inline-block; margin:0; background-color:#f00; } </style> <div><p>居中</p></div>
4、position:relative; + float:left;
用於所有元素的水平居中（元素不能絕對定位，且內容若是過多，會出現橫向滾動條，可以在父容器外套一層容器設定overflow:hidden;）
<style> div{ position:relative; left:50%; float:left; background-color:#099; } p{ position:relative; left:-50%; background-color:#f00; } </style> <div><p>居中</p></div>
5、line-height
用於單行文字的垂直居中（父容器高度固定）
<style> p{ height:100px; background-color:#f00; line-height:100px; } </style> <p>居中</p>
6、上下左右padding
父容器上設定上下左右padding，用於設定為內聯塊、塊級元素的水平垂直居中（常用於按鈕中）
<style> p{ display:inline-block; margin:0; padding:10px; background-color:#f00; } </style> <p>居中</p>
7、position:absolute; + margin:auto;
用於設定為塊級元素的水平垂直居中（元素寬高固定）
<style> div{ position:relative; height:100px; background-color:#099; } p{ position:absolute; top:0; right:0; bottom:0; left:0; width:50px; height:50px; margin:auto; background-color:#f00; } </style> <div><p></p></div>
8、position:absolute; + 負margin
用於設定為塊級元素的水平垂直居中（元素寬高固定）
<style> div{ position:relative; height:100px; background-color:#099; } p{ position:absolute; top:50%; left:50%; width:50px; height:50px; margin:-25px 0 0 -25px; background-color:#f00; } </style> <div><p></p></div>
9、position:absolute; + calc()
用於設定為塊級元素的水平垂直居中（元素寬高固定，IE8及以下不支援）
<style> div{ position:relative; height:100px; background-color:#099; } p{ position:absolute; top:calc(50% - 25px); left:calc(50% - 25px); width:50px; height:50px; margin:0; background-color:#f00; } </style> <div><p></p></div>
10、table-cell + vertical-align + inline-block + text-align
用於設定為內聯塊元素的水平垂直居中（元素不能浮動、絕對定位，注意清除inline-block引起的下邊空白）
<style> div{ display:table-cell; width:100px; height:100px; background-color:#099; text-align:center; vertical-align:middle; } p{ display:inline-block; margin:0; background-color:#f00; vertical-align:middle; } </style> <div><p>居中</p></div>
11、偽元素 + vertical-align + inline-block + text-align
用於設定為內聯塊元素的水平垂直居中（元素不能浮動、絕對定位，注意清除inline-block引起的下邊空白）
<style> div{ height:100px; background-color:#099; text-align:center; } div:after{ content:""; display:inline-block; width:0; height:100%; vertical-align:middle; } p{ display:inline-block; margin:0; background-color:#f00; vertical-align:middle; } </style> <div><p>居中</p></div>
12、position:absolute; + transform:translate(-50%, -50%);
用於設定為塊級元素的水平垂直居中（IE8及以下不支援）
<style> div{ position:relative; height:100px; background-color:#099; } p{ position:absolute; top:50%; left:50%; margin:0; background-color:#f00; transform:translate(-50%, -50%); } </style> <div><p>居中</p></div>
13、display:flex;
父容器上設定display:flex; 用於所有元素的水平垂直居中（IE10及以下不支援，本方法適用於所有元素）
<style> div{ display:flex; height:100px; background-color:#099; justify-content:center; align-items:center; } p{ margin:0; background-color:#f00; } </style> <div><p>居中</p></div>
14、background-position:center;
用於圖片居中，使用透明圖片寬高100%，背景圖片background-position居中，background-image需要動態載入最好內聯，也可以用span代替img，會少載入一張透明圖片
以上方法都可以用於圖片居中
<style> p{ height:100px; background-color:#f00; } img{ display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center; } </style> <p><img style="background-image:url(images/1.jpg);" src="images/1.png" alt="居中"></p>
15、writing-mode
用於垂直居中，根據方法1、2、3改
<style> div{ width:100%; height:100px; background-color:#099; text-align:center; writing-mode:vertical-lr; } p{ display:inline; margin:0; background-color:#f00; writing-mode:horizontal-tb; } </style> <div><p>居中</p></div>
<style> div{ width:100%; height:100px; background-color:#099; writing-mode:vertical-lr; } p{ margin:auto 0; background-color:#f00; writing-mode:horizontal-tb; } </style> <div><p>居中</p></div>
<style> div{ width:100%; height:100px; background-color:#099; text-align:center; writing-mode:vertical-lr; } p{ display:inline-block; margin:0; background-color:#f00; writing-mode:horizontal-tb; } </style> <div><p>居中</p></div>