CSS属性—居中对齐篇

为了网页的样式美观，我们经常要用到居中对齐来调整布局，所以特意整理了常用的居中对齐所需要的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，其子节点会居中对齐