通过css实现样式居中的几种范式

实现左右居中：方法一：

margin: 0 auto;

方法二：

display: flex;
justify-content: center;

方法三：（特定情况，比如标签内容居中，文字按钮内容居中）

padding: 0 20px;

方法四：

position: relative;
transform: translateX(-50%);

方法五：

position: relative;
top: 50%;
margin-left: -20px;

方法六：

display: gird;
justify-items: center;

方法七：

display: table-cell;
text-align: center;

实现上下居中：方法一：

margin auto 0;

方法二：

display: flex;
align-items: center;

方法三：

display: gird;
align-items: center;

方法四：

padding: 20px 0;

方法五：

position: relative;
transform: translateY(50%);

方法六：

position: relative;
top: 50%;
margin-top: -20px;

方法七：

display: table-cell;
vertical-align: middle;

方法八：

line-height: 40px;

实现上下左右居中：方法一：

position: relative;
top: 0;
left: 0;
bootom: 0;
right: 0;

方法二：

display: flex;
align-items: center;
justify-content: center;

方法三：

display: gird;
align-items: center;
justify-items: center;

方法四：

display: table-cell;
text-align: center;
vertical-align: middle;

方法五：

padding: 20px 20px;

方法六：

margin: 0 auto;
line-height: 40px;