前几天在公司的分享交流会上，我分享了前端经常会遇到的元素上下左右居中的几个解决办法，今天详细的给大家说一下：
1.在已知要居中元素宽高的情况下：
给要居中元素绝对定位，left和top都设为50%，通过margin-top和margin-left的负值设置
代码截图
示例显示
2.在未知要居中元素宽高的情况下：
2.1：要居中元素绝对定位，把其left,top,bottom,right均设置数值将其宽高撑开
代码截图
示例显示
2.2 给其父级元素加display:box属性实现
代码截图
示例显示
以上是我总结的居中方法，只针对当前的主流浏览器和移动端，其中有一些低版本浏览器兼容问题没有考虑，还望大家见谅，如有其他的好方法，欢迎大家为我推荐。
更多精彩内容欢迎关注我的订阅号峰来风趣
前几天在公司的分享交流会上，我分享了前端经常会遇到的元素上下左右居中的几个解决办法，今天详细的给大家说一下： 1....
CSS控制居中是前端开发中非常常用的布局技能，本文列出几种CSS控制元素居中的几种方法。 谈及HTML元素居中展...
背景：前端经验2年，5月份经历了几个公司的面试，记录一下面试总结 css部分 上下左右居中布局 盒模型 纯css写...
原文参考 纯CSS实现垂直居中的几种方法 html 当元素为 block时 position position +...
纯css解决图片在div中等比例居中问题 上代码
我们经常会让元素进行上下左右的居中，这里提供几种方法供大家使用 我们经常会让元素进行上下左右的居中，这里提供几种方...
1、如何实现不确定宽高的盒子上下左右居中 2、如何实现不确定宽高的图片上下左右居中 3、纯css写倒三角的原理：
1、如何实现不确定宽高的盒子上下左右居中 2、如何实现不确定宽高的图片上下左右居中 3、纯css写倒三角的原理： ...
CSS中如何完美做到居中，一直是令前端工程师头疼的问题。最近读到CSS-TRICKS中的一篇帖子，将居中问题的解决...
下面是CSS居中的几种方法： 水平居中元素： 通用方法，元素的宽高未知 方式一：CSS3 transform 方式...
本文标题：前端纯css解决上下左右居中问题的几种方法
本文链接：https://www.haomeiwen.com/subject/xumujttx.html
网友评论