水平居中

行内元素（内联元素）

如<span>、<a>、<label>、<em>、<img>等

直接构建一个具有：text-align: center;样式的容器，那么里面包含的行内元素都会居中。

块级元素

如<div>、<p>、<form>、<ul>、<li>、<hr>等。块级元素可以设置height、width，则分为定宽与不定宽。

定宽

margin: 0 auto; 实现容器居中

text-align: center; 实现文本居中

不定宽

1. 直接把元素改为行内元素，即：display: inline;然后就可以用text-align: center;但是这样做有一个缺点就是不可以设置width和height了。

2. 使用父级元素浮动和相对定位以及left: 50%；子元素left: -50%。

水平垂直居中

方案1：position元素、已知宽度

父元素：position: relative;

子元素：position: absolute;

left: 50%，top: 50%，然后减去元素自身宽度的一半（margin: -50px 0 0 -50px;）

方案2：position、transform元素、未知宽度

将margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%)。

方案3：flex布局

父元素：

display: flex;  //flex布局   

justify-content: center;  //使子项目水平居中   

align-items: center;  //使子项目垂直居中