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

css水平垂直居中的几种方式

在前端岗位快三年了。布局中关于水平垂直两个方向居中的实现有几种方式:

方式一:将容器设置为弹性容器,即display: flex;,在水平和垂直两个方向分别设置居中对齐。完整代码如下:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css水平垂直居中对齐</title> <style> body{ font-size: 30px; min-height: 100vh; background-color: aqua; display: flex; align-items: center;/*垂直方向居中*/ justify-content: center;/*水平居中*/ } /* #center{ width: 300px; height: 300px; border: 1px solid red; text-align: center; line-height: 300px; } */ </style></head><body> <div id="center">水平垂直居中</div></body></html>

这个方式无论无论子元素是否设置width和height,都可行!

方式二:子元素设置固定的width和height,使用绝对定位进行居中设置:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css水平垂直居中对齐</title> <style> body{ font-size: 30px; min-height: 100vh; background-color: aqua; position: relative; } /* 子元素设置具体的width和height */ #center{ width: 300px; height: 300px; border: 1px solid red; text-align: center; line-height: 300px; margin:auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } </style></head><body> <div id="center">水平垂直居中</div></body></html>

或者是:

 /* 子元素设置具体的width和height */ #center{ width: 300px; height: 300px; border: 1px solid red; text-align: center; line-height: 300px; margin:auto; position: absolute; top: 50%; left: 50%; margin-left: -150px; margin-top: -150px; }

使用css3中的变换属性:

 /* 子元素设置具体的width和height */ #center{ width: 300px; height: 300px; border: 1px solid red; text-align: center; line-height: 300px; margin:auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

如果是单独给元素设置水平或者垂直居中的话,都是相同的思路!

赞(0)
未经允许不得转载:飞天狒狒 » css水平垂直居中的几种方式

评论 抢沙发

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