当前位置: 首页 > news >正文

【css】css实现水平和垂直居中

通过 justify-content 和 align-items设置水平和垂直居中, justify-content 设置水平方向,align-items设置垂直方向。
代码:

<style>
.center {display: flex;justify-content: center;align-items: center;height: 200px;border: 3px solid green; 
}
</style>
</head>
<body><p>同时将 justify-content 和 align-items 属性设置为 <em>center</em> 的容器将使项目在中心(在两个轴上)对齐。</p><div class="center"><p>水平和垂直居中1</p>
</div></body>

渲染效果:
在这里插入图片描述

http://www.lryc.cn/news/112124.html

相关文章:

  • 常见Charles在Windows10抓包乱码问题
  • 汽车维修保养记录查询API:实现车辆健康状况一手掌握
  • 正则表达式学习记录(Python)
  • Ubuntu20.04操作系统安装Docker
  • python制作小程序制作流程,用python编写一个小程序
  • Github 创建自己的博客网站
  • Windows上安装 jdk 环境并配置环境变量 (超详细教程)
  • 高效构建 vivo 企业级网络流量分析系统
  • 认识awk
  • 【C#学习笔记】数组和索引器
  • 常见距离计算的Python实现
  • 开发运营监控
  • 食品小程序的制作教程
  • Kubernetes(K8s)从入门到精通系列之十三:软件负载平衡选项
  • 数据特征选择 | Matlab实现具有深度度量学习的时频特征嵌入
  • 浅谈webpack
  • 【 stable diffusion LORA模型训练最全最详细教程】
  • 蓝桥杯上岸每日N题 第八期 (全球变暖)!!!
  • CSS基础介绍笔记1
  • https请求异常引发(Received fatal alert: unrecognized_name):如何快速解决项目中问题?
  • 小程序 view下拉滑动导致scrollview滑动事件失效
  • 《ROS2》教程
  • 抖音seo源码开发源代码搭建分享
  • MATLAB——使用建立好的神经网络进行分类程序
  • Spring5.2.x 源码使用Gradle成功构建
  • iOS永久签名工具 - 轻松签使用教程
  • 如何申请中国境内提供金融信息服务业务许可
  • Java多线程(六)
  • ceil(),floor(),round()函数C++详解
  • 自动化处理,web自动化测试处理多窗口+切换iframe框架页总结(超细整理)