css水平垂直居中的方法

css水平垂直居中的方法

水平居中

1.行内元素水平居中的方法。可以通过给他设置text-align:center(给父盒子)
2.块级元素设置水平居中:margin:0 auto(前提是他的父盒子是有宽度的,是根元素也可以)
3.块级元素也可以通过display: inline（转换行内元素）,display:inline-block(转换行内块元素) 然后给他们添加text-align:center来实现水平居中
水平垂直居中

水平垂直居中

行内元素水平用text-align:center,垂直居中可以用line-height等于它自身的高度即可

margin与tranlate的区别，margin会影响其他的元素，tranlate自身偏移，不会影响其他的盒子

<div class="outer">
      <div class="inner"></div>
    </div>

方法1

.outer {
        width: 300px;
        height: 300px;
        background-color: pink;
      }
//利用margin实现居中
.inner {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: skyblue;
        left: 50%;
        top: 50%;
        margin-left:25px;
        margin-right:25px;
      }

方法2

//给父盒子设置相对定位
.outer {
        position: relative;
        width: 300px;
        height: 300px;
        background-color: pink;
      }
//子盒子设置绝对定位  利用tranlate自身偏移实现居中
.inner {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: skyblue;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

方法3

//给父盒子设置相对定位
.outer {
        position: relative;
        width: 300px;
        height: 300px;
        background-color: pink;
      }
//子盒子设置绝对定位  利用margin实现居中。
.inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 50px;
        height: 50px;
        background-color: blue;
        margin: auto;
      }

方法4    利用flex布局

.box {
  display: flex;
  justify-content: center; //主轴方向居中排列
  align-items: center;    //侧轴方向剧中排列
}