css--元素居中常用方法总结
文章图片
前言
元素居中是日常开发和学习中最常见的问题，同时也是面试中经常考察的知识点，本文来总结一下这方面的知识点。
正文
1、水平居中
（1）子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置浮动，否则居中失效。
文章图片
（2）子父元素宽度固定，父元素设置 text-align：center，子元素设置display：inline-block，并且子元素不能设置浮动，否则居中失效。
文章图片
2、水平垂直居中 （1）子父元素宽高度固定，子元素相对于父元素绝对定位(子绝父相)，子元素 top，left 设置 50%，子元素 margin-top 和 margin-left 减去各自宽高的一半或者 transform ：translate（-50%，-50%）。
文章图片
（2）子父元素宽高度固定，子元素相对于父元素绝对定位(子绝父相)，使用calc达到上面效果。
文章图片
（3）子父元素宽高度固定，子元素相对于父元素绝对定位(子绝父相)，子元素上下左右全为 0，然后设置子元素margin：auto。
【css--元素居中常用方法总结】
文章图片
（4）子元素相对定位，子元素 top，left 值为 50%，transform：translate（-50%，-50%）。
（5）文本水平垂直居中 父元素设置text-algin:center使得子元素水平居中，子元素设置line-height为父元素高度，使得子元素垂直居中。
321311111111111111
文章图片
（6）利用line-height，vertical-align实现元素水平垂直居中。
321
文章图片
（7）父元素设置弹性盒子，display：flex； justfy-content：center ；align-item：center。
文章图片
（8）父元素设置 display：table-cell vertical-align：middle，子元素设置 margin：auto。
文章图片
（9）网格布局实现水平垂直居中display: grid; place-items: center。
文章图片
写在最后 以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。
文章图片
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 你也许不知道的Vuejs|你也许不知道的Vuejs - 花式渲染目标元素
- React.js的表单(六)
- 集合框架(集合嵌套存储和遍历元素的案例代码实现)
- 第六课|第六课 js管理页面元素位置大小
- css|css中元素的显示与隐藏
- 承载梦想一路前行小春‖号氧元素3周年庆典之地中海豪华邮轮行
- [Py023]List元素重复
- 升了！《哪吒》跃居中国影史票房榜第五位！哪吒究竟是哪里人（）
- CSS笔记