元素居中方式总结

Posted 2020-11-30 xuewting

垂直居中：

块级元素

1.使用position设置定位方式后进行元素的偏移

    .box {
      width: 300px;
      height: 300px;
      background-color: burlywood;
      position: relative;
      top: 50%; /*元素顶部将会定位到希望的居中位置，需要将元素上移自身高度的50%*/
      margin-top: -150px;
      /*上移自身高度的一半*/
      /*
      transform: translateY(-50%);
      CSS3特性，可在高度不确定时使用
      */
    }  

2.利用CSS3的弹性布局（flex）

    /*将需要居中的元素的父元素（body）设置为flex布局，高度确定或不确定时都可使用*/
    .father {
      display: flex;
      /* 定义body中的元素垂直居中 */
      align-items: center; 
      /* 定义body中的元素水平居中 */
      justify-content: center;
    }
    .son {
     width: 300px;
     height: 300px;
     background-color: burlywood; 
     }

内联元素

使用CSS3 flex布局

水平居中：

块级元素

1.直接设置margin

body,html{
  margin: 0;
  padding: 0;
  height: 100%; 
  width: 100%;
  /* 默认为0 */
}
margin: 0 auto/*宽度确定时使用*/

2.使用position设置定位方式后进行元素的偏移（类似于垂直居中相应的方法），先设置left：50%再设置margin-left：（-元素宽度），宽度确定时使用/transform: translateX(-50%);，宽度确不确定都可使用。

/*宽度不确定时使用，默认子元素的宽度和父元素一样*/
  .father {
     width: 500px;
     height: 500px;
     background-color: pink;
     text-align: center;/*将父元素设置text-align：center*/
  }
  .son {
    background-color: blue;
    display: inline;/*子元素设置display：inline或display：inline-block*/
  }

4.使用flex布局（类似于垂直居中相应的方法），设置justify-content: center，宽度确不确定都可使用内联元素也可使用此方法进行水平居中

内联元素

1.若父元素是块级元素，直接设置父元素text-align:center
2.若父元素不是块级元素，先将父元素设置为display：block再设置text-align:center