css的几种居中样式

css的几种居中样式

一、水平居中

/*块级元素*/
/*1-外边距*/
 { 
    margin: 0 auto;
 }
/*2-定位*/
{
    display: absolute;
    left:50%;
    transform:translateX(-50%);
}
设置了宽度，可以margin负值 + transform:translateX(-50%)实现;
/*行内元素*/
/*1-对齐 给父级元素添加*/
{  
   text-align: center; 
}

二、垂直居中

1-块级元素;
/*定位*/
 {
   display: absolute;
   top:50%;
   transform:translateY(-50%);
  }
设置了宽度，可以margin：-50% + transform:translateY(-50%)实现;
2-行内元素;
   单行：行内子元素的高度等于块级父元素的高度即可
   多行：给父元素添加

 {
   display: table-cell;
   vertical-align:middle;
  }

三、水平垂直居中

1, margin负值 + 定位（transform）;
2, { 
    position:absolute;
    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;
}