如何让一个元素居中显示

在CSS中，元素分为了块级元素、行内元素以及行内块元素。针对不同的元素，其居中对齐的方式也各不相同。下面就说一下几种常用的布局方式：

文本的水平对齐

针对文本，如果需要在盒子中居中显示，就可以给父元素加上以下的属性：

 .box {
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        margin: 50px auto;
        /* 子元素会居中对齐 */
        text-align: center;
      }

父元素设置了该属性以后，里面不仅仅是文本能够对其，行内块元素也能居中对齐显示：

文本的垂直对齐

文本除了水平对齐以外，还可以垂直对齐。

  .box {
        width: 300px;
        height: 200px;
        /* 设置行高为父元素的高度 就能让文本垂直对齐 */
        line-height: 200px;
        border: 1px solid #000;
        margin: 50px auto;
        /* 子元素会居中对齐 */
        text-align: center;
      }

既要水平对齐，又要垂直对齐，即将两个属性同时设置在父元素上，如上图。

元素的水平对齐

方案一 利用外边距

一个元素也可以在另一个元素中对齐显示。

 .content {
        /* 让该元素在父元素中水平对齐 */
        margin: 0 auto;
        width: 1200px;
        height: 120px;
        background-color: orange;
      }

方案二 利用定位 + 边距

 .box {
        position: relative;
        height: 120px;
        border: 1px solid #000;
        margin: 50px auto;
      }

 .content {
        /* 利用定位把元素放到左边 在使用边距调整盒子到适当的距离 */
        position: absolute;
        left: 50%;
        /* 移动的距离是盒子宽度的一半 负数 */
        margin-left: -600px;
        width: 1200px;
        height: 120px;
        background-color: orange;
      }

方案三 利用定位 + transform

transform: translateX(-50%);

将上面的边距代码换成这行，同样能达到水平对齐的效果。

元素的垂直对齐

元素垂直对齐，可以采用方案二和方案三。

 /* 方案二 关键代码 */
 top: 50%;
 margin-top: -60px;
 
 /* 方案三 关键代码 */
 transform: translateY(-50%);

水平垂直对齐，就分别加上水平和垂直对齐的代码即可：

.content {
        /* 利用定位把元素放到左边 在使用边距调整盒子到适当的距离 */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 1200px;
        height: 120px;
        background-color: orange;
      }

注意：
1、采用外边距对齐的元素，只能用于水平对齐，不能用于垂直对齐
2、采用方案二，外边距移动的距离会随着元素的大小而改变
3、采用方案三，元素大小改变，不会影响元素的对其方式