css3总结之居中

  居中在前端布局上很常见,也很常用,也是最基本的技巧。居中效果在方向控制上基本可以分解成水平居中,垂直居中和水平垂直居中。

  针对调整的元素不同,具体的处理方式上有些差异。这里我们先不讲绝对定位下的居中,绝对定位下的居中方法很多,变化也多。下面讲的都是非绝对定位下的方法,原则上有两个,一个是常用,另外一个是兼容性最好。

水平居中是居中效果中最常见的,最常用的方法莫过于下列两种:

HTML:

<div class="box">薛定谔的喵!</div>

1、text-align center

.box {text-align: center;
}

 

2、定宽元素 margin: 0 auto;

.box {width: 96px;margin: 0 auto;  
}

结果自然不言而喻,都是居中的,

如果是对于文本的水平居中更倾向于第一点,因为在第二点上压根就不好计算文本的宽度,即使计算会有小许的误差,虽然对文字兼容性上不是很好,却很适合于按钮或者是宽度固定的块状元素,

反过来需要说明的是第一点也不单单是对文字有效,而是对内联(inline-XX)元素都有效,这个我们可以看?下面这个栗子:

HTML:

<div class="box"><div class="inline-box"></div>
</div>

CSS:

.inline-box {display: inline-block;width: 100px;height: 100px;background-color: burlywood;
}
.box {text-align: center;width: 100%;height: 100px;
}

效果如下:

除了inline-box,同理inline-flex,inline-table,inline-grid都能生效,因此text-align不单单可以用于文本居中,同时也能用于内联元素居中。

垂直居中常用方法也是两种:

1、行高等高 即:line-height = height

HTML:(还是刚刚的代码)

<div class="box"><div class="inline-box">薛定谔的喵!</div>
</div>

CSS:

.inline-box {line-height: 100px;display: inline-block;width: 100px;height: 100px;background-color: burlywood;
}
.box {text-align: center;width: 100%;height: 100px;
}

2、vertical-align

有些人会说这属性时好时坏,其实这属性在display为inline-block或者table-cell的元素内才会生效,这点是需要注意哒。(虽然人家名字很好听,但生效条件也蛮苛刻哒!T_T)

HTML还是?上面那个栗子,

CSS:

.inline-box {display: table-cell;vertical-align: middle;width: 100px;height: 100px;background-color: burlywood;
}
.box {width: 100%;height: 100px;
}

 效果图如下:

如果是inline-block的条件下,这时候就需要动用黑科技(手动滑稽)了,即配合伪类实现垂直居中,效果跟?那个图差不多。

LESS:

.inline-box {display: inline-block;width: 100px;height: 100px;background-color: burlywood;&:after {content: "";width: 0;height: 100%;display: inline-block;vertical-align: middle;}
}
.box {text-align: center;width: 100%;height: 100px;
}

水平垂直居中也是最常见的居中,具体表现在空白的列表页,比如电商类App购物车界面,如下天猫App购物车界面,下面列举几种常用方法

1、盒子模型->flex-box

display为flex下:

align-items - 垂直方向

justify-content - 水平方向

display为box下:(一般要带上私有属性,如-webkit-box,-moz-box或者-ms-flexbox)

box-align - 垂直方向

box-pack - 水平方向

这个方法有很多浏览器的兼容属性,对于不同版本的浏览器兼容属性上还有优先级,

比如有些低版本的webkit内核浏览器-webkit-box优先级就比-webkit-flex高,这个坑曾经在低版本的微信浏览器出现过。

HTML:

<div class="container"><div class="box"><div class="inline-box">薛定谔的喵!</div></div>
</div>

LESS:

.inline-box {display: inline-block;width: 100px;height: 100px;background-color: burlywood;&:after {content: "";width: 0;height: 100%;display: inline-block;vertical-align: middle;}
}
.container {height: 100vh;display: flex;align-items: center;justify-content: center;display: -webkit-flex;-webkit-align-items: center;-webkit-justify-content: center;display: -webkit-box;-webkit-box-align: center;-webkit-box-pack: center;
}

实现效果如下:

本质上是将一个盒子铺满屏幕,利用盒子的居中属性进行自适配居中,这样一来可以减轻计算上的工作量而效果达到最优

2、复合水平垂直居中

这里我是复用vertical-align和text-align属性,即将上述栗子.container样式调整如下,当然复用的方法还有很多。

LESS:

.container {height: 100vh;width: 100vw;display: table-cell;vertical-align: middle;text-align: center;
}

结果自然同上述结果图。

这里我们需要对这两种方法进行分析,这两种方案都是基于当前的界面容器的高度做的绝对居中,但缺点也有的,就是高度都是可以调整的。如果界面是要求满屏垂直居中而且界面并没有高度动态变化的属性的话,可以用这两种方法。反之,则需要绝对定位属性做限制(position:absolute),绝对定位下的居中那效果就太多,这里就不赘述了。

 

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hhc02bb&title=css3总结之居中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370913.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

福州java培训哪里好_南通java培训哪家好

渡课IT教育成立于2006年&#xff0c;14年来&#xff0c;我们累计输送学员达 6000 &#xff0c;其中南通地区输送50%&#xff0c;上海 40%&#xff0c;其他地区 10%&#xff0c;学员1年后的平均薪水达 9860 元&#xff1b;受到1000用人单位的赞誉与支持。Java开发的需求量在北上…

研究僵局–第2部分

调查死锁时最重要的要求之一就是要研究死锁。 在我的上一个博客中&#xff0c;我编写了一个名为DeadlockDemo代码&#xff0c;该代码使用一堆线程在一系列银行帐户之间转移随机数&#xff0c;然后陷入僵局。 该博客运行该代码以演示获取线程转储的几种方法。 线程转储只是一个…

连锁便利店管理系统有什么用

连锁便利店管理系统对于连锁便利店的运营和管理非常有用。以下是一些常见的用途&#xff1a; 1. 库存管理&#xff1a;连锁便利店通常需要管理多个门店的库存&#xff0c;管理系统可以帮助实时掌握各个门店的库存情况&#xff0c;包括商品数量、进货记录、库存调拨等。这样可以…

浏览器打印设置横向打印_爱普生打印机无线连接设置

1、首先&#xff0c;把epsonl385打印机插上电源通电&#xff0c;待自检完成后&#xff0c;便可以设置。如果用户家里的无线路由器带有WPS(Wi-Fi Protected Setup)或QSS(又称快速安全设置)功能&#xff0c;那就简单多了。2、通过WPS或QSS无线路由器按钮连接&#xff0c;给无线路…

linux python定时任务调度,Python下定时任务框架APScheduler的使用

1.APScheduler简介&#xff1a;APScheduler是Python的一个定时任务框架&#xff0c;可以很方便的满足用户定时执行或者周期执行任务的需求&#xff0c;它提供了基于日期date、固定时间间隔interval 、以及类似于Linux上的定时任务crontab类型的定时任务。并且该框架不仅可以添加…

研究僵局–第1部分

我敢肯定我们都去过那里&#xff1a;太晚了&#xff0c;您饿了&#xff0c;服务器已挂起&#xff0c;或者应用程序正在以蜗牛的速度运行&#xff0c;并且有人喘着气想要您解决问题&#xff0c;然后再去解决。 您的应用程序意外挂起的可能原因之一是称为死锁的线程问题。 无需赘…

使用Vue.js和Axios从第三方API获取数据 — SitePoint

更多的往往不是&#xff0c;建立你的JavaScript应用程序时&#xff0c;你会想把数据从远程源或消耗一个[ API ]&#xff08;https&#xff1a;/ /恩。维基百科。org /维基/ application_programming_interface&#xff09;。我最近看了一些[公开]&#xff08;https://github.co…

区位码怎么知道点阵里的起始点_自身免疫疾病的GAPS起始饮食改良版

写这篇文章的原因如果您已经关注我的博客一段时间&#xff0c;您知道我开始使用GAPS饮食&#xff0c;然后转换到AIP饮食&#xff0c;因为我仍在努力治疗炎症和自身免疫的发作。 Katy Haldiman 有同样的经历&#xff0c;我们并不孤单。许多患有自身免疫性疾病的人在 GAPS 上挣扎…

微信小程序APP(商超营销类)经验总结

项目介绍 这是一款主打门店营销的小程序。包括首页、门店、营销、个人设置、登录、数据统计展示、营销设置等。 本来要独立完成整个项目&#xff0c;包括前后端一套的&#xff0c;有些意外因素&#xff0c;项目临时收尾&#xff08;说明&#xff1a;只完成了前端的部分&#…

excel不显示0_Excel数字过长不能完整显示?超长数字变为0

Excel中计算规则和限制设定数值精确度为15位&#xff01;超过15位后&#xff0c;数字会显示为0excel数字超过15位&#xff0c;会显示为0&#xff0c;超过10位&#xff0c;默认采用科学计数法显示1、如何解决超长数字输入&#xff0c;全部显示问题&#xff1f;&#xff08;单元格…

Android天气预报设计

——嵌入式软件开发 名字功能模块代码行数备注谢灿辉Widget200桌面小程序李杨敏GPS定位&#xff0c;百度地图API100-150获取当前所在城市丁小芳城市选择Activity&#xff0c;天气API获取天气100-200包括数据库交互本软件是一个天气类应用软件&#xff0c;带有widget&#xff0c…

算法笔记_164:算法提高 最小方差生成树(Java)

目录 1 问题描述 2 解决方案 1 问题描述 问题描述给定带权无向图&#xff0c;求出一颗方差最小的生成树。输入格式输入多组测试数据。第一行为N,M&#xff0c;依次是点数和边数。接下来M行&#xff0c;每行三个整数U,V,W&#xff0c;代表连接U,V的边&#xff0c;和权值W。保证图…

layui数据表格(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)

表格展示神器之一&#xff1a;layui表格 前言&#xff1a;在写后台管理系统中使用最多的就是表格数据展示了&#xff0c;使用表格组件能提高大量的开发效率&#xff0c;目前主流的数据表格组件有bootstrap table、layui table、easyUI table等.... 博主个人比较倾向于layui&am…

算法设计与分析_算法设计与分析(第2版)第2章分治策略回顾

YI时间&#xff5c;外刊&#xff5c;MM-DFW&#xff5c;机器学习系列点击上方蓝字&#xff0c;关注给你写干货的松子茶分治策略是通用算法设计技术之一&#xff0c;很多有效的算法是它的特殊实现,顾名思义就是分而治之。一个问题能够用分治法求解的要素是问题能够按照某种方式分…

2017-2018-1 Java演绎法 第三周 作业

团队任务&#xff1a;团队展示与选题团队展示 队员学号及姓名 学号  姓名  主要负责工作  20162315  马军  日常统计&#xff0c;项目部分代码  20162316  刘诚昊  项目部分代码&#xff0c;代码质量测试  20162317  袁逸灏  组长 项目 主要 代码  201…

linux开机启动roscore,树莓派ubuntuMate系统中开机自启动ROS的launch文件

0x00 为何需要开机自启动launch文件在ROS开发后期阶段由于功能已经趋于稳定&#xff0c;因此就需要系统在一上电启动后就自动把ROS下的各节点程序加载运行&#xff0c;这样就省去了我们还得手动输入roslaunch命令来加载bringup的launch文件的操作。经过我的实际测试目前有两种方…

Oracle ADF移动世界! 你好!

您好&#xff0c;ADF Mobile&#xff0c;世界&#xff01; 您可能已经知道... ADF Mobile在这里&#xff01; 以下是一些链接&#xff0c;这些链接会让您有宾至如归的感觉。 ADF Mobile主页&#xff1a; http://www.oracle.com/technetwork/developer-tools/adf/overview/ad…

css 小知识点:inline/inline-block/line-height

inline: 此元素会被显示为内联元素&#xff0c;元素前后没有换行符。因此&#xff1a;无法设置宽度和高度&#xff5e; inline-block: 行内块元素。元素前后没有换行符&#xff08;CSS2.1 新增的值&#xff09; 用通俗的话讲&#xff0c;就是不独占一行的块级元素。然后拥有…

协同过滤算法_机器学习 | 简介推荐场景中的协同过滤算法,以及SVD的使用

本文始发于个人公众号&#xff1a;TechFlow&#xff0c;原创不易&#xff0c;求个关注今天是机器学习专题的第29篇文章&#xff0c;我们来聊聊SVD在上古时期的推荐场景当中的应用。推荐的背后逻辑有没有思考过一个问题&#xff0c;当我们在淘宝或者是某东这类电商网站购物的时候…

JavaOne 2012:观察与印象

当我坐在旧金山国际机场等待登上飞机返回家中时&#xff0c;我一次又一次令人满意但累人的JavaOne&#xff08;2012&#xff09;体验&#xff0c;我正在开始写这篇特别的博客文章。 自上周日的主题演讲以来&#xff0c;在会议上疯狂地撰写了约30篇博客文章之后&#xff0c;很难…