css水平垂直居中(绝对定位居中)

使用绝对定位有个限制就是父集必须设置一个固定的高度。

首先HTML

1 <div id="box">
2     <div class="child"></div>
3 </div>    

CSS

 1 #box {
 2     position: relative;
 3     height: 500px;
 4     background: red;
 5 }
 6 .child {
 7     width: 100px;
 8     height: 100px;
 9     background: blue;
10     margin: auto;
11     position: absolute;
12     top: 0;
13     right: 0;
14     bottom: 0;
15     left: 0;
16 }

示例图:

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

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

相关文章

洛谷 2719 搞笑世界杯

洛谷 2719 搞笑世界杯 洛谷原题链接 这道难度只有普及-的题目却花了我一个多小时才搞出来。但做出来之后就会发现&#xff1a;其实这题确实挺水。。。 解题思路&#xff1a; 首先开二维数组 dp [ i ] [ j ] . 代表已售 i 张 A , j 张 B 时后两人买到的票相同的概率。 很显然&am…

搭建SSH框架–使用篇

创建如下包&#xff1a; action用于响应请求 service则是提供请求的操作 dao用于操作数据库 entity用于映射数据库表 打开DB Browser –> personalCD&#xff08;创建篇的数据库连接&#xff09;–> SCOTT –> TABLE –> t_USER –> 右键Hibernate Reverse……

3个简单步骤即可测试Java 8

即将发布的Java 8版本为Java开发人员带来了许多新功能&#xff0c;但是升级时始终存在代码破裂的风险。 我们都记得Java 7发行时有一系列非常严重的错误 。 当然&#xff0c;我们所有人都可以帮助避免在Java 8中出现相同的问题。我今天要介绍的方法是使用现有的Continuous Int…

父类div高度适应子类div

父类div高度适应子类div 通常有许多div的高度由子类的高度决定父类的高度&#xff0c;所以需要父类div要适应子类div的高度&#xff0c;一般情况父类的高度可以直接设置成“auto”即可。 在有的情况下&#xff0c;子类div会撑破父类div. 所以需要走一些调整。通常有3种方法对…

jenkins jar包上传maven仓库

1 Jenkins 编译后部署至 Maven 仓库jenkins编译后构件&#xff08;如&#xff1a;jar包&#xff09;部署至maven仓库需修改以下内容&#xff1a;maven 仓库配置&#xff1b;项目 pom 文件&#xff1b;本地仓库的 settings.xml 内容&#xff1b;jenkins goals 修改1&#x…

Java文件合并变得语义化

与任何程序员交谈&#xff0c;并询问他应该如何进行合并&#xff1a;“它应该理解代码&#xff0c;对其进行解析&#xff0c;然后根据结构进行合并” –他很可能会说。 而这恰恰是SemanticMerge for Java所做的&#xff1a;它解析要合并的文件&#xff08;加上祖先或“文件在更…

KnockoutJS-快速入门

虽然在WPF中接触过MVVM模式&#xff0c;可是刚开始在Web中接触到Knockout.JS让我大吃一惊&#xff0c;简化了好多工作量&#xff0c;原来可能需要一大堆的JS脚本完成的工作量&#xff0c;被释放许多。接触KnockoutJS一年多了&#xff0c;在好多个项目中也用到过&#xff0c;虽然…

如何在一个页面添加多个不同的kindeditor编辑器

kindeditor官方下载地址&#xff1a;http://kindeditor.net/down.php &#xff08;入门必看&#xff09;kindeditor官方文档&#xff1a;http://kindeditor.net/doc.php &#xff08;入门必看&#xff09;Kindeditor编辑器初始化参数文档&#xff1a;http://kindeditor.net/doc…

JSONArray.fromObject不执行且不报错问题的解决

今天在写javaweb工程的时候需要向前台传json格式的数据&#xff0c;用到了json-lib-2.4-jdk15.jar等一系列包&#xff0c;然而却出现如下状况&#xff1a; CityBean是一个javaBean&#xff0c;我们看到&#xff0c;控制台只打印出了list的内容&#xff0c;而下面的两个却没能打…

爬虫-scrapy

阅读目录 一 介绍二 安装三 命令行工具四 项目结构以及爬虫应用简介 五 Spiders六 Selectors七 Items八 Item Pipeline九 Dowloader Middeware十 Spider Middleware十一 settings.py十二 爬取亚马逊商品信息一 介绍 Scrapy一个开源和协作的框架&#xff0c;其最初是为了页面抓取…

Java垃圾回收(4)

G1&#xff1a;垃圾优先 G1收集器是热点JVM中要实现的最新收集器。 自Java 7 Update 4以来&#xff0c;它一直是受支持的收集器。OracleGC团队也公开表示&#xff0c;他们对低暂停GC的希望是完全实现的G1。 这篇文章来自我之前的垃圾收集博客文章&#xff1a; 热点GC概述 。 …

Html5 冒泡排序演示

本文通过一个简单的小例子&#xff0c;简述冒泡算法在B/S中的简单使用&#xff0c;仅供学习分享使用&#xff0c;如有不足之处&#xff0c;还请指正。 概述 冒泡排序&#xff08;Bubble Sort&#xff09;&#xff0c;是一种计算机科学领域的较简单的排序算法。 它重复地走访…

一种编写测试的好方法

测试。 最近我一直在考虑进行测试。 作为我对各种项目所做的代码审查的一部分&#xff0c;我已经看到了数千行未经测试的代码。 这不仅是测试覆盖率统计数据指出这一点的情况&#xff0c;还更多是该项目中根本没有任何测试的情况 。 我一直听到这种悲惨状况的两个原因&#xff…

rem、px、em之间的区别以及网页响应式设计写法

个人收藏用&#xff0c;转载自&#xff1a;http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小&#xff0c;至今天为止都还在激烈的争论着&#xff0c;有人说PX做为单位好&#xff0c;有人说EM优点多&#xff0c;还有人在说…

游戏服务器架构图

1&#xff1a;ARPG类型游戏 2:MMORPG 3:MOBA 4:卡牌类 5&#xff1a;棋盘类 转载于:https://www.cnblogs.com/like-minded/p/8297718.html

GlassFish 4带来了Java EE 7

真是惊喜 除了推出新的iOS 7外&#xff0c;苹果在wwdc上什么也没提供。 碰巧的是&#xff0c;在他们的主题演讲后不久&#xff0c;又有7个人正式露面。 GlassFish 4.0已于昨天晚上发布&#xff08;显然是不需要的&#xff09;。 新的Java EE 7参考实现自动成为当今第一个可用的…

bootstrap的栅格布局与两列布局结合使用

在工作中我们常常需要实现响应式布局&#xff0c;这个可以使用bootstrap的栅格系统来实现&#xff0c;我们在列里也需要实现一部分的响应式。比如下面的效果图&#xff0c;需要实现左边图标固定&#xff0c;右边的自适应 &#xff1a; 左边固定宽度&#xff0c;右边自适应&…

JVM性能魔术技巧

HotSpot是我们众所周知和喜爱的JVM&#xff0c;是Java和Scala汁流淌的大脑。 多年来&#xff0c;许多工程师对其进行了改进和调整&#xff0c;并且在每次迭代中&#xff0c;其代码执行的速度和效率都接近本机编译代码。 JIT&#xff08;“即时”&#xff09;编译器是其核心。…

mysql 10个日期,MySQL自学篇(10)——日期函数

MySQL自学篇(十)——日期函数日期和时间函数(1)获取当前日期的函数和时间的函数CURDATE()和CURRENT_DATE()函数&#xff0c;获取当前日期select current_date(),curdate(),curdate()0;curdate()0 表示将当前时间转化为数值型CURTIME()和CURRENT_TIME()获取当前时间select cur…

python-flask-请求源码流程

启动先执行manage.py 中的 app.run() class Flask(_PackageBoundObject):   def run(self, hostNone, portNone, debugNone, **options):from werkzeug.serving import run_simpletry:#run_simple 是werkzeug 提供的方法&#xff0c;会执行第三个参数 self()run_simple(ho…