CSS块元素水平垂直居中的实现技巧

针对之前遇到过的一些特殊样式的实现,我今天做个总结,目的有二:一是将这些方法记录下来,以便将来需要用到时查找使用。二为将这些大神们智慧的结晶发扬光大,让广大前端程序猿们能够少走弯路。此贴为更新帖,以后若有好的css样式技巧,小菜我会不定期更新。
一、块元素水平垂直居中
对于一个块元素的水平垂直居中,水平居中的方式不必多说,一般用margin:auto;等方法即可实现。而对于垂直居中,尽管有vertical-align:middle属性,但是由于其只适用于table标签中,而table标签效果不好控制的特点大家都懂。。。因此,我们一般常用的方法是:将子级元素设定inline-block属性,并将其行高属性:line-height的值设定为与父级元素相同的高度。
代码如下
html方面:
  1. <body>  
  2. <div class="big">  
  3. <div class="small"></div>  
  4. </div>  
  5. </body>  
css方面: 
  1. .big  
  2. {  
  3. width:500px;  
  4. height:500px;  
  5. border:1px solid red;  
  6. position:relative;  
  7. }  
  8. .small{  
  9. width:200px/*自己元素宽高可任意设定 */  
  10. height:200px;  
  11. position:absolute;left:0px;top:0px;rightright:0px;bottombottom:0px;  
  12. margin:auto;  
  13. background-color:#cc9900;  
  14.  }  
在上述代码中,子级元素的宽高是任意设定的。都可以实现此元素在父级元素中水平垂直居中显示。在父级元素中,我们用了position的relative属性。在子级元素中,我们将它的position属性设定为absolute后,将四个方向的值都设定为0px。并且让他的margin值自适应。从审查元素中我们可以发现,如此设定后,子级元素的margin区域会充满整个父级元素,并且左右margin值是相等的,上下margin值亦如此。但是这并不符合,当代码数值有冲突时,优先解析top值及left值的规律。因为究竟是什么原理,小菜也不得而知。。如果有大神知晓,还望不吝赐教。但是这不失为一种好的办法,希望大家活学活用。
二、after伪类清浮动
通常我们在对块元素设浮动以后,需要对其清浮动,以免布局混乱。常见的清浮动方法主要有两种:1)、在后面的子元素css中写"clear:both;"。2)在浮动元素的父级元素中写"overflow:hidden"。现在,我们可以用第三种方法,利用after伪类写一个浮动属性,这样只要有需要清楚浮动的地方,我们就给其父元素加上这样一个浮动属性就可以了。
代码如下:

  1. .clearfix:after  
  2. {  
  3. content:"";  
  4. display:table;   /*利用table不允许浮动的属性来清除浮动。也可以替换成"overflow:hidden;"*/   
  5. clear:both;  
  6. }  
这种方法有个好处,即可以将其写入reset中,之后可以多次调用。

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

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

相关文章

Intellij IDEA 将工程转换成maven工程 详解

1> 右键工程&#xff0c;点击 Add Framework Support2> 选中 Maven&#xff0c;再点击 OK3> 工程根目录自动生成 pom.xml 文件&#xff0c;这样 工程就支持 Maven版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 http://blog.csdn.net/che…

设置Apache Hadoop多节点集群

我们正在分享有关在基于Linux的机器&#xff08;多节点&#xff09;上安装Apache Hadoop的经验。 在这里&#xff0c;我们还将分享我们在各种故障排除方面的经验&#xff0c;并在将来进行更新。 用户创建和其他配置步骤– 我们首先在每个集群中添加一个专用的Hadoop系统用户。…

数据结构(七)排序---直接插入排序(稳定)

经典排序算法----直接插入排序算法及其改进&#xff08;稳定&#xff09; 定义&#xff1a; 直接插入排序的基本操作是将一个记录插入到已经排好序的有序表中&#xff0c;从而得到一个新的&#xff0c;记录数加一的有序表。 实现思想 我们预留了一个哨兵&#xff0c;这里我们将…

CSS3中的透明属性opacity的用法实例

实例设置 div 元素的不透明级别&#xff1a;div{opacity:0.5;}完整例子&#xff1a;<!DOCTYPE html><html><head><style> div{background-color:red;opacity:0.5;filter:Alpha(opacity50); /* IE8 以及更早的浏览器 */}</style></head><…

java嵌套类型 无法隐藏外层类型_java内部类深入详解 内部类的分类 特点 定义方式 使用...

java内部类 内部类的分类 特点 定义方式 使用 外部类调用内部类 多层嵌套内部类 内部类访问外部类属性 接口中的内部类 内部类的继承 内部类的覆盖 局部内部类 成员内部类 静态内部类 匿名内部类内部类定义将一个类定义放到另一个类的内部,这就是内部类内部类与组合是完…

java.io.FileNotFoundException: generatorConfig.xml (系统找不到指定的文件。)

在使用MyBatis的逆向工程生成代码时&#xff0c;一直报错java.io.FileNotFoundException: generatorConfig.xml (系统找不到指定的文件。)&#xff0c;如图 文件结构如下&#xff1a; 代码如下&#xff1a; import java.io.File; import java.util.ArrayList; import java.util…

单例设计模式–鸟瞰

几天前&#xff0c;当我回到家乡时&#xff0c;我的一位来自同事的大三学生参加了一家跨国公司的采访&#xff0c;在采访过程中受了重伤。 我的意思是&#xff0c;由于面试小组提出的难题&#xff0c;他无法使面试合格。 当我回到班加罗尔时&#xff0c;他分享了他在技术面试中…

软件实践第一步——自我介绍

031602631&#xff1b;我是超爱美食的苏韫月&#xff1b;我的爱好是品尝所能接触到的所有甜点&#xff08;迟早&#xff01;&#xff09;&#xff1b;我最近新宠&#xff1a;拌面加扁肉&#xff08;京园淳百味&#xff09;&#xff1b;时隔一年我又回归心惊胆颤写博客文的日子。…

CSS3中使用translate() 方法实现元素位置的移动

translate() 方法通过 translate() 方法&#xff0c;元素从其当前位置移动&#xff0c;根据给定的 left&#xff08;x 坐标&#xff09; 和 top&#xff08;y 坐标&#xff09; 位置参数&#xff1a;实例div{transform: translate(50px,100px);-ms-transform: translate(50px,1…

java机器学习库_Amazon Deep Java Library——Java 机器学习工具箱

近年来&#xff0c;人们对机器学习的兴趣稳步增长。具体来说&#xff0c;现在&#xff0c;企业在各种各样的场景中使用机器学习进行图像识别。它在汽车工业、医疗保健、安全、零售、仓库、农场和农业的自动化产品跟踪、食品识别&#xff0c;甚至通过手机摄像头进行实时翻译等方…

阻抗计算

si9000也可以算 一般有点差异&#xff0c;板厂可以微调 加上滤油&#xff0c;实际阻抗会降低2-3欧 影响最大的是层厚 先选择最薄的芯板&#xff0c;注意差分线的阻抗匹配&#xff0c;间距越小&#xff0c;阻抗小&#xff0c; 转载于:https://www.cnblogs.com/IotI/p/8587277.h…

Spring Data Solr教程:动态查询

Solr通常被称为搜索服务器&#xff0c;我们可以在实现全文搜索功能时使用它。 但是&#xff0c;当我们实现从搜索表单获取其输入的搜索功能时&#xff0c;利用Solr的性能通常是明智的。 在这种情况下&#xff0c;执行的搜索查询取决于收到的输入。 这意味着查询参数的数量取决…

[cdq分治][树状数组] Jzoj P4419 hole

Description GFS打算去郊外建所别墅&#xff0c;享受生活&#xff0c;于是他耗费巨资买下了一块风水宝地&#xff0c;但令他震惊的是&#xff0c;一群DSJ对GFS的富贵生活深恶痛绝&#xff0c;决定打洞以搞破坏。现在我们简化一下这个问题&#xff0c;在这片土地上会按顺序发生一…

关于CSS3实现响应式布局的一些概念和术语

响应式布局也被应用到网站前端开发中&#xff0c;在国内这一词想必是非常火吧&#xff0c;那网站为什么要使用响应式布局呢&#xff1f;原因和其他创意性的生活用品基本上是一样的&#xff0c;处于对人力物力财力的节省和对生活富有诗意的一种追求。在人力物力和财力有限的情况…

AjaxSubmit+Servlet表单文件上传和下载

一、背景 前段时间公司要求我做一个上传和下载固件的页面&#xff0c;以备硬件产品在线升级&#xff0c;现在我把这部分功能抽取出来作为一个Demo Project给大家分享。 话不多说&#xff0c;先看项目演示 --> 演示 源码 二、源码 前端 js库&#xff1a;jquery-3.2.1.min.js…

番石榴的EventBus –简单的发布者/订阅者

在查看Google的Guava Libraries 版本10的最新版本时&#xff0c;我注意到EventBus的添加。 这是发布-订阅样式消息传递系统的轻量级实现。 这类似于JMS提供的发布-订阅模型&#xff0c;但是消息保留在应用程序内&#xff0c;而不是在外部广播。 EventBus允许您在程序中创建对象…

apscheduler -定时任务

https://apscheduler.readthedocs.io/en/latest/userguide.html 简单的使用方式为&#xff1a; from apscheduler.schedulers.blocking import BlockingScheduler sched BlockingScheduler()sched.add_job(ff_task,cron,hour0-1,8-23,minute28)sched.add_job(avor_task, cron,…

java迭代器 异常_java迭代器失效 | 学步园

今天在测试代码的时候出现一个异常ConcurrentModificationException&#xff0c;该异常网上很多解决方案以及解释&#xff0c;但我还是再记录一遍吧。代码抽象出来是这样的&#xff1a;import java.util.ArrayList;import java.util.List;public class Test {public static voi…

CSS3中的圆角边框属性详解(border-radius属性)

实例向 div 元素添加圆角边框&#xff1a;div{border:2px solid;border-radius:25px;}页面底部有更多实例。浏览器支持IEFirefoxChromeSafariOperaIE9 、Firefox 4 、Chrome、Safari 5 以及 Opera 支持 border-radius 属性。定义和用法border-radius 属性是一个简写属性&#x…

83.const与类

const常量对象,无法改变数据,只能引用尾部带const方法类的成员如果是const,可以默认初始化,也可以构造的初始化,不可在构造函数内部初始化类中的const成员,无法直接修改,可以间接修改类的成员函数const三种情形:1.返回值const,2.返回常量,3.参数const,可读不可写,尾部const,常量…