因为涉及到元素类型inline or block，水平或垂直，是否知道尺寸，浏览器是否支持等，使得居中的情况分为很多种，因此没有办法一一覆盖，但是一些最基本的思想和方法还是要掌握的，在具体情况下可以依据这些基本的实现思想进行相应改动。
1. 经典方法
水平：
Inline: text-align:center;(适用于Inline-block)
Block: margin: 0 auto; 注意其位置应该放在所有其他margin之前，防止被覆盖
针对block，还可以使用 left 50% + negative margin-left
这里注意3点：
第一， 使用left，必须为relative or absolute；
第二， margin-left的值为负，且大小为box size width的一半，注意，是box，也即应该是 content + padding + border的总和，而非css上面看到的width大小；
第三， 如果不知道元素盒大小，不可以使用margin-left，而是使用transform: translateX(-50%);
垂直：
Inline：height == line height
Block：最常用的就是 top 50% + negative margin-top
这里也要注意3点：
第一， 使用top，必须为relative or absolute；
第二， margin-top的值为负，且大小为box size width的一半，注意，是box，也即应该是 content + padding + border的总和，而非css上面看到的height大小；
第三， 如果不知道元素盒大小，不可以使用margin-top，而是使用transform: translateY(-50%);
2. Flex方法
如果浏览器支持flex，还可以使用
.wrapper{
display: flex;
flex-direction: column;
justify-content:center;
}
注意，父元素一定要是有height的，否则使用Flex垂直居中会不起作用，但是即便不设置width，flex水平居中也是可以的。
可以解释为，元素默认宽度和浏览器或父元素同款，而高度在没有内容时默认为0。
以上为基本思想，具体情况下进行相应改动。