关注互联网应用及运维技术的个人博客

实现元素水平垂直居中的几种方法

1、绝对定位position:absolute;

position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);

如果子元素给固定的宽高,也可以使用绝对定位和margin实现居中:

div{   width:250px;   height:150px;   position:absolute;   top:50%;   margin-top:-75px;   left:50%;   margin-left:-125px;}

绝对定位和css3中的变换也可以实现居中:

div{   width:250px;   height:150px;   position:absolute;   top:50%;   left:50%;   transform:translate(-50%,-50%)}

或者变换设置为:transform:translate(-125px,-75px)

2、使用flex弹性布局,只要设置水平方向和垂直方向居中即可:

display:flex;
align-items: center;
justify-content: center;

以上这两种居中方式,子元素没有固定的宽高。

3、flex和margin:auto实现居中:

先将容器元素设置为弹性容器,并给它一定的高度,因为弹性容器的高度是由它的内容决定的,如果不给高度的话,无法看出内容在弹性容器中是否居中。

如:设置body为弹性容器:

body{   display:flex;   min-height:100vh} div{   font-size:100px;   color:red;   margin:auto}
赞(0)
未经允许不得转载:飞天狒狒 » 实现元素水平垂直居中的几种方法

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址