为了网页的样式美观，我们经常要用到居中对齐来调整布局，所以特意整理了常用的居中对齐所需要的css属性。

1. 元素居中对齐：
   要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。
   设置到元素的宽度将防止它溢出到容器的边缘。(切记要设置width)
   元素通过指定宽度，并将两边的空外边距平均分配

.div {margin: auto;width: 50%;
}

2. 文本居中对齐
   文本在元素内居中对齐，可以使用 text-align: center;

.div {text-align: center;line-hight: 50px;
}

3. 图片居中对齐
   要让图片居中对齐, 可以使用margin: auto;并将它放到块级元素中:

img {display: block;margin: auto;width: 40%;
}

4. 使用position（定位）实现居中

/*清除body的padding和margin*/
body {margin: 0;padding: 0;
}.container {position: relative;width: 100%;
}/*absolute定位时参考上级第一个position不为默认static的父级元素*/
.right {position: absolute;right: 50%;width: 300px;background-color: #b0e0e6;
}

或者这样，使用position定位解决，距离顶部和左边的距离为父级的一般，然后沿着x轴和y轴平移自身的负50%，也就是向上和向左移动自身的一半，可以做到居中对齐：

position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);

5. 使用line-height: 6rem配合text-aline: center;来实现居中对齐
6. 用float实现左右对齐

float: right;
float: left;

7. 使用padding: 300px和text-align: center实现居中对齐
8. 使用flex布局（弹性盒子）实现居中对齐，父级节点声明为display: flex
   然后设置属性align-items: center; justify-content: center，其子节点会居中对齐