1.设置绝对定位，然后上下左右设值为0，margin为auto。
2.flex布局：justify-content:center,align-items:center
3.设置文本的对话，行高+text-align
4.绝对定位，设置left,top为50%，transform:translate(-50%,-50%)
css中实现元素水平垂直居中的方法
2023-02-10
64
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
前端面试
相关文章
|
5天前
|
XML
前端开发
数据格式
|
7天前
|
前端开发
|
8天前
|
JavaScript
前端开发
iOS开发
|
12天前
|
Web App开发
前端开发
开发者
|
12天前
|
XML
前端开发
开发者
|
30天前
|
前端开发
容器
|
1月前
|
前端开发
UED
容器
|
1月前
|
前端开发
|
前端开发
|
前端开发
容器
必须知道的css水平、垂直居中
在网页制作中，有很多种水平、垂直居中方法，本文就归纳如下几种：
水平居中
1.
不建议用了。
2. text-align:center 在父容器里水平居中 inline 文字，或 inline 元素
3.margin:0 auto；
4.用 position 加 translate translate(-50%,-50%) 比较奇特，百分比计算不是以父元素为基准，而是以自己为基准。
115
0
0
热门文章
最新文章
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
【前端设计】HTML+CSS+JavaScript基本特性
8
【掰开揉碎】详解 CSS3 Grid 布局
9
解密CSS单位：px、em、vh的区别与应用
10
CSS 中BFC是什么？