1.比较传统的方式 absolute+margin负值偏移
特点：父容器要设置宽高，需要知道子容器宽高，偏移量是子容器宽高的一半且是负值，兼容性好
/* absolute+margin负值偏移布局 */.layout.absolute {position: relative;}.layout.absolute article {position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -160px;}<section class="layout absolute"><article><p>1.absolute+margin负值偏移<br>（父容器要设置宽高，需要知道子容器宽高）</p></article></section>2.absolute+transform布局
特点：父容器要设置宽高
/* absolute+transform布局 */.layout.transform {position: relative;}.layout.transform article {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}<section class="layout transform"><article><p>2.absolute+transform<br>（父容器要设置宽高）</p></article></section> 3.flex布局
特点：自适应
/* flex布局 */.layout.flex {display: flex;justify-content: center;align-items: center;}<section class="layout flex"><article><p>3.flex<br>（自适应）</p></article></section>4.table-cell布局
特点：比其他方法多1个容器，注意边距重叠
.layout.table-cell {display: table;width: 100%;}.layout.table-cell .outer {display: table-cell;vertical-align: middle;text-align: center;}.layout.table-cell article {margin: 0 auto;overflow: auto;}<section class="layout table-cell"><div class="outer"><article><p>4.table-cell<br>（多1个容器，注意边距重叠）</p></article> </div></section> 5.grid布局
特点：自适应,要考虑兼容性
.layout.grid{display: grid;}.layout.grid article {justify-self: center;align-self: center;}<section class="layout grid"><article><p>5.grid<br>（自适应,要考虑兼容性）</p></article></section> 6.inline-block布局
特点：自适应，兼容性好
.layout.inline-block {text-align: center;}.layout.inline-block::after {content: '';height: 100%;display: inline-block;vertical-align: middle;}.layout.inline-block article {display: inline-block;vertical-align: middle;}<section class="layout inline-block"><article><p>6.inline-block<br>（自适应）</p></article></section> 7.absolute + margin-auto 布局
特点：内外容器都要设置宽高，兼容性好
.layout.margin-auto {position: relative;}.layout.margin-auto article{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}<section class="layout margin-auto"><article><p>7.absolute + margin-auto<br>(内外容器都要设置宽高) </p></article></section>8.line-height 布局
特点：只适合单行inline，而且要知道父容器的高度，兼容性好
.layout.line-height {line-height: 150px;}.layout.line-height article {display: inline;margin: auto;}<section class="layout line-height"><article><p>8.line-height(只适合单行inline，而且要知道父容器的高度)</p></article></section>完整例子：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>垂直居中</title><style>html,body {padding: 0;margin: 0;}.layout {margin-bottom: 15px;height: 150px;background-color: blueviolet;background-clip: content-box;}.layout article {background-color: lightcoral;color: #fff;width: 320px;height: 100px; text-align: center;}/* absolute+margin负值偏移布局 */.layout.absolute {position: relative;}.layout.absolute article {position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -160px;}/* absolute+transform布局 */.layout.transform {position: relative;}.layout.transform article {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}/* flex布局 */.layout.flex {display: flex;justify-content: center;align-items: center;}/* table-cell布局 */.layout.table-cell {display: table;width: 100%;}.layout.table-cell .outer {display: table-cell;vertical-align: middle;text-align: center;}.layout.table-cell article {margin: 0 auto;overflow: auto;}/* grid布局 */.layout.grid{display: grid;}.layout.grid article {justify-self: center;align-self: center;}/* inline-block布局 */.layout.inline-block {text-align: center;}.layout.inline-block::after {content: '';height: 100%;display: inline-block;vertical-align: middle;}.layout.inline-block article {display: inline-block;vertical-align: middle;}/* absolute + margin-auto */.layout.margin-auto {position: relative;}.layout.margin-auto article{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}/* line-height 布局 */.layout.line-height {line-height: 150px;}.layout.line-height article {display: inline;margin: auto;}</style>
</head>
<body><section class="layout absolute"><article><p>1.absolute+margin负值偏移<br>（父容器要设置宽高，需要知道子容器宽高）</p></article></section><section class="layout transform"><article><p>2.absolute+transform<br>（父容器要设置宽高）</p></article></section><section class="layout flex"><article><p>3.flex<br>（自适应）</p></article></section><section class="layout table-cell"><div class="outer"><article><p>4.table-cell<br>（多1个容器，注意边距重叠）</p></article></div></section><section class="layout grid"><article><p>5.grid<br>（自适应,要考虑兼容性）</p></article></section><section class="layout inline-block"><article><p>6.inline-block<br>（自适应）</p></article></section><section class="layout margin-auto"><article><p>7.absolute + margin-auto<br>(内外容器都要设置宽高) </p></article></section><section class="layout line-height"><article><p>8.line-height(只适合单行inline，而且要知道父容器的高度)</p></article></section></body>
</html>
![查看csv编码_[小O地图-数据] - 坐标转地址文字（逆地理编码）](http://pic.xiahunao.cn/查看csv编码_[小O地图-数据] - 坐标转地址文字（逆地理编码）)
