css样式居中，常见三种方式

    今天给大家分享三种关于css样式居中的方式，话不多说直接上代码：

1，水平居中

/*块级元素*/

/*1-外边距*/

 { 

    margin: 0 auto;

 }

/*2-定位*/

{

    display: absolute;

    left:50%;

    transform:translateX(-50%);

}

设置了宽度，可以margin负值 + transform:translateX(-50%)实现;

/*行内元素*/

/*1-对齐 给父级元素添加*/

{  

   text-align: center; 

}

2，垂直居中

1-块级元素;

/*定位*/

 {

   display: absolute;

   top:50%;

   transform:translateY(-50%);

  }

设置了宽度，可以margin：-50% + transform:translateY(-50%)实现;

2-行内元素;

   单行：行内子元素的高度等于块级父元素的高度即可

   多行：给父元素添加

 {

   display: table-cell;

   vertical-align:middle;

  }

3，水平垂直居中

1, margin负值 + 定位（transform）;

2, { 

    position:abosulate;

    top:50%;

    left:50%;

    transform:transition(-50%,-50%); 

    }

3,flex布局居中

/*给父元素添加*/

{   display: flex;

    justify-content: center; /*水平居中*/

    align-items: center;  /*垂直居中*/

}

4，grid布局居中

/*给父元素添加*/

{   display: grid;

    place-align:center;

    /*或者*/

    place-content:center;

}

    以上便是关于css样式居中，常见三种方式的全部内容，更多内容干货还可关注慕课网其他文章~