<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { /* 1. 绝对定位的盒子不能使用左右margin auto居中 */ position: absolute; /* margin: 0 auto; */ /* left: 50%, 整个盒子移动到浏览器中间偏右的位置 */ left: 50%; /* 把盒子向左侧移动: 自己宽度的一半 */ /* margin-left: -150px; */ top: 50%; /* margin-top: -150px; */ /* 位移: 自己宽度高度的一半 */ transform: translate(-50%, -50%); width: 400px; height: 300px; background-color: pink; } </style> </head> <body> <div class="box"></div> </body> </html>
html+css实战154-位移-居中
2022-08-07
117
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
html+css实战154-位移-居中
目录
相关文章
|
14天前
|
前端开发
JavaScript
开发工具
|
4天前
|
数据采集
前端开发
网络协议
|
9天前
|
前端开发
搜索推荐
数据安全/隐私保护
|
9天前
|
PHP
|
15天前
|
JSON
JavaScript
前端开发
|
前端开发
|
1月前
|
XML
编解码
前端开发
|
17天前
|
XML
前端开发
JavaScript
|
1月前
|
前端开发
容器
内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫，通过HTML结构和CSS样式逐步构建叮当猫的各个部位，如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外，还添加了眼珠的动画效果，让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习，以提升动态图形创作技能。
16
0
0
|
1月前
|
前端开发
热门文章
最新文章
1
《手把手教你》系列技巧篇（十八）-java+ selenium自动化测试-元素定位大法之By css中卷（详细教程）
2
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
3
《手把手教你》系列技巧篇（十七）-java+ selenium自动化测试-元素定位大法之By css上卷（详细教程）
4
前端代码整洁与规范之CSS篇
5
《手把手教你》系列技巧篇（十九）-java+ selenium自动化测试-元素定位大法之By css下卷（详细教程）
6
Tailwind CSS如何在vue项目中使用
7
【掰开揉碎】详解 CSS3 Grid 布局
8
CSS 中BFC是什么？
9
解密CSS单位：px、em、vh的区别与应用
10
CSS 网页布局元素
1
vscode快捷HTML结构 | Emmet
11
2
黑色个人主页HTML源码
24
3
如何使用代理IP通过HTML和CSS采集数据
12
4
html标签的样式
10
5
html文档
11
6
代码编辑器特效爆炸html5
8
7
《HTML 简易速速上手小册》第8章：HTML 表单高级技术（2024 最新版）
22
8
《HTML 简易速速上手小册》第7章：HTML 多媒体与嵌入内容（2024 最新版）
12
9
《HTML 简易速速上手小册》第5章：HTML 高级布局技巧（2024 最新版）
22
10
《HTML 简易速速上手小册》第4章：HTML 的表单与输入（2024 最新版）
25