网络编程 Asp编程 Php编程 CodeIgniter .Net编程 Xml编程 VB编程 asp.net(c#) 支付接口 PayPal 支付宝 iOS开发 Android Xamarin.Android Android Studio ORM Dapper 其他 IbatisNet MVC WCF 微信开发 微信小程序 WPF Solr SignalR CMD xarmin.android Tesseract ASP.NET Core Vue VsCode JAVA Tomcat spring mvc MyBatis JDBCTemplate Dubbo swagger IDEA HSSFWorkbook Spring Cloud HBuilderX AI .net core AutoMapper SqlSugar IdentityServer4 Razor Blazor Redis Quartz NPOI HSSFWorkbook DevExpress 分布式存储技术 LINQ RabbitMQ 淘宝客 Dockerfile cron表达式 阿里云OSS服务 JWT SolrNet AngleSharp Elasticsearch perl Golang AutoJs adb appium python bat c Smobiler Power apps Power Bi 开发PCF RTSP视频推流服务器 OutSystems echarts 服务器 Web服务器 Ftp服务器 Mail服务器 Dns服务器 Win服务器 Linux服务器 安全防护 系统激活 wifi SVN服务器 虚拟机 Flash Media Server IIS服务器 ngrok服务器 分布式系统 版本控制系统 Git 监控系统 Nginx zookeeper SolrCloud node Nacos Docker PHP服务器 Web前端 Jquery js AJAX EasyUI CSS HTML 自适应/响应式 HTML5 地图API MP3 编辑器 UEditor 插件 highcharts SVG Bootstrap layer Element React Ant Design Nextjs yarn 软件开发 winform BAT编程 项目管理 数据模型工具 PowerDesigner PDMan UML流程图 物联网 开发工具 Flash工具 VS2010 VS2012 VS2017 VS2019 wget 抓包工具 Eclipse IntelliJ Idea VS2022 cmder 网络攻击 CC攻击 数据库 Access Mssql Mysql SQLite php_sqlsrv Oracle MongoDB NOSql Redis 设计在线 酷站推荐 网页设计 WEB标准 视频处理 设计活动 网站运营 建站经验 策划盈利 SEO优化 网站推广 淘宝秘籍 短信通道 新闻资讯 业界动态 收购融资 门户动态 搜索引擎 网络游戏 电子商务 广告传媒 厂商开发 手机应用 各业合同 法律法规 名词解释 钓鱼技巧 百科知识 理财 生肖星座 操作系统 windows xp sp3 windows server 2008 win10 windows server 2016 windows11 Linux 图形图像 Photoshop教程 illustrator教程 CAD设计教程 开放平台 腾讯 新浪 手机应用 小米手机 魅族手机 装修 壁纸施工 防水技术 室内平面设计 蹲便器 卫生间 CAD室内三维图形 装修知识 学生学习资料库 小学生学习资料库 初中生学习资料库 高中生学习资料库 搜索引擎 百度 360 搜狗 神马 头条 集群搭建 Hadoop集群 k8s集群 平台架构 SaaS 测试工具 JMeter 大数据 站长在线 好站推荐 联盟资讯 联盟新闻 联盟介绍 联盟点评 网赚技巧
隐藏

position:absolute和margin:auto 连用实现元素水平垂直居中

发布:2021/4/22 23:23:26作者:管理员 来源:本站 浏览次数:1307

有时候,要实现一些元素水平垂直都居中,这部分元素呢 可能大小未知,例如一些图片或者是一些未知大小的块元素。

利用绝对定位可以将要居中的元素脱离文档流.

 position: absolute;
 left:0px;
 right: 0px;
 top:0px;
 bottom: 0px;

但他的父元素要设成相对定位

position: relative;

这样设置完成后 会发现子元素并没有居中。这是因为虽然脱离了文档流但是top的bottom的值是相等的。根据优先级会自动向上对齐。同理左右也是如此。

这时在要居中的元素中加上

margin:auto;

margin:auto会自动去计算子元素和父元素之间的边距,并设为居中。所以就会实现上下左右都居中。

 

那么还有一个问题,既然居中是有margin:auto来计算实现。为什么还需要将元素设为绝对定位呢?

这是因为margin:auto 默认只会计算左右边距。而上下如果设置为auto时默认是取0.也就是说,margin:auto和margin:0 auto 在一般情况下没有区别,不能实现垂直居中。

但是有了绝对定位后,margin-top和margin-bottom 的值就不是0了,也是通过计算所得。所以能实现垂直居中。

最后,发出完整的css类

复制代码
.center{ position: absolute; left:0px; right: 0px; top:0px; bottom: 0px; margin:auto; background: pink; text-align: center; vertical-align:middle;
    }
复制代码

晚安,世界