[CSS] CSS display:flex实现内容水平垂直居中展示
2023-02-18 15:36:52 时间
display:flex实现内容水平垂直居中展示
需要增加下面两点就能实现
首先父级元素必须有高度,没有高度就无法垂直居中,如果想全屏垂直居中,可以设置高度为100vh
比如body设置为这样
body{ display: flex; justify-content: center; align-items: center; height: 100vh; }
里面的子元素就会垂直水平居中显示
源码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>独立私有化智能在线客服系统</title> </head> <body> <style> body{ background: rgb(242,243,247); display: flex; justify-content: center; align-items: center; height: 100vh; } .sub,.main,.admin{ letter-spacing: 18px; font-family: fangsong; font-size: 38px; writing-mode: vertical-rl; } .main{ font-size: 60px; margin: 0px 20px; } .admin{ display: block; text-decoration: none; color: red; border: 2px solid red; padding: 10px 0px 2px 0px; border-radius: 12px; margin-top: 150px; font-size: 20px; letter-spacing: 5px; } .admin:hover{ color: red; } .sub span{ font-size: 50px; } </style> <a href="/login" target="_blank" class="admin">在线客服</a> <h1 class="main"> 各路相知 </h1> <div class="sub">互聊片刻,<span>结交</span></div> </body> </html>
效果:
相关文章
- Charles mock数据的四种方式及弱网测试设置
- H5性能分析及前端性能监控:window.performance
- pip安装Frida-tools报错(ssl)urlopen error解决办法
- appium设备交互命令
- selenium WebDriver 中的几种等待--sleep(),implicitly_wait(),WebDriverWait()
- selenium WebDriver 复用浏览器
- conftest常用hook函数
- selenium WebDriver 自动化测试之文件上传及弹框alert处理
- selenium Webdriver自动化测试之多窗口及网页frame处理
- selenium Webdriver自动化测试之手势操作TouchAction 详解
- 性能调优之iftop命令详解
- 【正则表达式】以个人的理解帮助大家认识正则表达式
- 性能调优命令之top
- mac及Windows系统禁止Chrome浏览器更新
- pip安装超时问题
- 爬虫学习--http请求详解
- Centos 配置eth0 提示Device does not seem to be present
- 判定表法测试用例设计
- 非关系型数据库(nosql)介绍
- 性能调优命令之vmstat