CSS教程

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

本文主要是介绍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样式居中,常见三种方式的全部内容,更多内容干货还可关注慕课网其他文章~

这篇关于css样式居中,常见三种方式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!