使用CSS简单实现垂直居中（2）
作者：dudo 来源：dudo blog 发布时间：2008-06-23 07:32:00
标签：居中,css,浮动
修正后的方法
面对这些问题，一个类似居中技术可以供我们采用，它依然采用了对于顶部的绝对定位，但是对于水平居中使用的是自由浮动。这会限制元素从窗口的左侧滑出。
下面是修正后的代码：
html,body{
height:100％;
margin:0;
padding:0;
}
body{
background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
text-align:center;
min-width:626px;
min-height:400px;
}
#vertical{
position:absolute;
top:50％;
margin-top:-198px;/* half main elements height*/
left:0;
width:100％;
}
#hoz {
width:624px;
margin-left:auto;
margin-right:auto;
height:394px;
border:1px solid silver;
background:#666;
overflow:auto;/* allow content to scroll inside element */
text-align:left;
}
h1 {color:#fff;margin:0;padding:0}
<div id="vertical">
<div id="hoz">
<h1>Content goes here</h1>
</div>
</div>
可以在这里查看在线演示：
Horizontal-and-vertical-centerl.htm （1.01 KB）
水平方向上已经达到我们所要的效果，但是当窗口高度缩小时顶部依然会消失，如图3所示：
图3
修正：
为了解决这个问题（也是本文写作的目的）我之前曾经使用过几个比较复杂的方法，但是现在使用的这种方法更简单、更健壮，那就是使用浮动（float）来代替绝对定位。
页面中设置为顶端50％绝对定位的第一个元素进行浮动。然后把浮动向上拉动，大小为元素高度的一半。
下面是必要的修改：
#vertical{
float:left;
height:50％;
margin-top:-198px;/* half vertical height*/
width:100％;
}
<div id="vertical"></div>
<div id="hoz">
<h1>Content goes here</h1>
</div>
这里有一个在线演示：Horizontal-and-vertical-centerl.htm （1.00 KB）你可以自己观察一下。
图4
重要的是我们对浮动元素设置的宽度是100％，并且记住由于某些浏览器会出现问题我们需要对后面的元素设置clear:both。如果我们不使用“float”，元素依然会居中但是它会从顶端消失掉。
0
投稿猜你喜欢
- Oracle 的正规表达式的实施是以各种 SQL 函数和一个 WHERE 子句操作符的形式出现的。如果您不熟悉正规表达式，那么这篇文章可以让
一、前言MySQL 的锁按照范围可以分为全局锁、表锁、行锁，其中行锁是由数据库引擎实现的，并不是所有的引擎都提供行锁，MyISAM 就不支持- 我就废话不多说了，大家还是直接看代码吧~package main import ("fmt""time&quo
- 开启mysql的远程访问权限默认mysql的用户是没有远程访问的权限的，因此当程序跟数据库不在同一台服务器上时，我们需要开启mysql的远程
- 注意:myemployees库和shoppingCart库在同一台物理主机，如果不在同一台物理主机该怎么办呢？下面我会介绍到。情况一2个库在
- 由于服务器无法上网，不得不采用离线方式安装。IDE=pycharm-community-2019.2.3，python=3.5.4。1 安装
- sql server中变量要先申明后赋值：局部变量用一个@标识，全局变量用两个@(常用的全局变量一般都是已经定义好的);申明局部变量语法：d
- 例题：假设你获取了250部电影的时长（列表a中），希望统计出这些电影时长的分布状态（比如时长为100分钟到120分钟电影的数量，出现的频率）
- 1. 张量的拼接(1) numpy.concatenatenp.concatenate((a1,a2,a3,…), axis=0)张量的拼接
- 前言给新的环境安装pip install tensorflow，结果报错了。跟着我分析解决一波。报错原因这个红字已经说的很清楚了。ERROR
- JSON Schema是一个用于验证JSON数据结构的强大工具, 我查看并学习了JSON Schema的官方文档, 做了详细的记录, 分享一
- 什么是字符串格式化，为什么需要这样做？我们有时候刷抖音/B站看到封面很好看，但是进入直播发现，不过如此！想必主播通过某种方式把输出转换为读者
- RocketMQ 是什么Github 上关于 RocketMQ 的介绍：RcoketMQ 是一款低延迟、高可靠、可伸缩、易于使用的消息中间件
- 一、连接Mysql格式： mysql -h主机地址 -u用户名 －p用户密码1、连接到本机上的MYSQL。首先打开DOS窗口，然后进入目录m
- 本篇文章介绍了Python中一些常见的包的作用和安装方法，希望对学习Python中的朋友有帮助！Python中一些包的基本用处和安装方法pi
- 用户管理是绝大部分Web网站都需要解决的问题。用户管理涉及到用户注册和登录。用户注册相对简单，我们可以先通过API把用户注册这个功能实现了：
- floor()方法返回不大于x的最大整数(向下取整)。语法以下是floor()方法的语法：import mathmath.flo
- 先说明2点开启缓存也会带来开销，主要表现在一下方面读取在查询开始之前必须要检查缓存如果查询是缓存的，但是不在结果集中，那么产生结果后保存数据
- 目录技术背景打格点算法实现打格点算法加速总结概要技术背景在数学和物理学领域，总是充满了各种连续的函数模型。而当我们用现代计算机的技术去处理这
- 0.目录1.遇到的问题2.创建二维数组的办法•3.1 直接创建法•3.2 列表生成式法•3.3 使用模块numpy创建1.遇到的问题今天写P
