您现在的位置是:首页 > Javascript
当前栏目
CSS 实现水平和垂直居中的三种方法
2023-03-07 09:42:53 时间
- 绝对定位 + 负边距:使用绝对定位并设置左右负边距和上下负边距,就可以实现水平和垂直居中的效果。
.center-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- flex 布局:使用 flex 布局可以轻松实现水平和垂直居中。
.center-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
- grid 布局:使用 grid 布局也可以实现水平和垂直居中。
.center-container {
display: grid;
place-items: center;
}
这些方法都可以实现水平和垂直居中的效果,您可以根据需要选择一种方法使用。
相关文章
- python unittest生成html报告_python+unittest框架生成HTML测试报告
- 快速构建一个用本地网络发送和接收消息的APP
- 2021年,排名前 15 的 Vue 后台管理模板
- Spring Boot一键换肤,so easy!
- 美国或将所有设计14nm以下中国芯片公司纳入出口管制?
- React的并发模式该如何使用?
- 如何在React中处理组件交互?
- 请查收 2020 全球 JS 现状调查报告
- Levels.fyi发布2020年度程序员收入报告
- 想要复制图像?Clipboard API 了解一下
- 2020全球CSS报告新鲜出炉,前端从业者平均年薪35w
- 10个对Web开发人员有用的HTML文件上传技巧
- AWS Firewall Manager – 您的 Web 应用程序资产的集中管理解决方案
- 为最终在 Twitch 上推出 AWS Quest 做准备
- React 消息订阅与发布机制
- Vue之设置视频为背景图
- 如何实现前端新手引导功能?
- 给网站页面设置加密访问
- 速度快的高匿又稳定的HTTP代理,有推荐的吗?
- 给网站侧边栏添加恋爱计时器