CSS实现垂直居中的5种方法（7）
作者：糖伴西红柿 来源：前端观察 发布时间：2009-03-04 12:53:00
步骤二：
现在我们开始用一些基本的 CSS 来给页面添加样式。把以下代码放入在我们的 html 页面顶部被引入的 style.css。
html, body { margin:0; padding:0; height:100％;} body { background:url('page_bg.jpg') 50％ 50％ no-repeat #FC3; font-family:Georgia, Times, serifs;} #floater { position:relative; float:left; height:50％; margin-bottom:-200px; width:1px;} #centered { position:relative; clear:left; height:400px; width:80％; max-width:800px; min-width:400px; margin:0 auto; background:#fff; border:4px solid #666;} #bottom { position:absolute; bottom:0; right:0;} #nav { position:absolute; left:0; top:0; bottom:0; right:70％; padding:20px; margin:10px;} #content { position:absolute; left:30％; right:0; top:0; bottom:0; overflow:auto; height:340px; padding:20px; margin:10px;}
在我们能够把 content 垂直居中之前， body 和 html 应该被拉伸到 100％ 的高度。由于 height
在 padding 和 margin 之内，所以我们要把它们设成 0 以防止因为很小的 margin 出现滚动条。
floater 的 margin-bottom 是 content 高度(400px)的一半， -200px。
现在可以看到一下效果：
#centred 的宽度为 80％。这可以市网页随着显示器的大小而变化。一般称作流体布局。设置 min-width 和
max-width 以避免网页过大或者过小。 但是 IE 不支持 min/max-width。显然可以用固定宽度来代替。
因为 #centred 是相对定位的，在它里面我们可以用绝对定位来定位元素。设置 #content 的 overflow:auto;
以避免滚动条的出现。IE 不怎么喜欢 overflow:auto; 除非我们指定高度(不是 top 和 bottom 的定位，也不是 ％)
因此我们给它指定高度。
0
投稿猜你喜欢
axios form-data格式 传输数据和文件form-data是在post请求下的一种传输方式，数据会在Form Data中传输，他的- Vue 3.2 引入了语法，这是一种稍微不那么冗长的声明组件的方式。您可以通过向 SFC 的元素添加属性来启用它，然后可以删除组件中的一些样
- 最近使用vue学习开发移动端的项目，使用了bette-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的
- 介绍职责链模式（Chain of responsibility）是使多个对象都有机会处理请求，从而避免请求的发送者和接受者之间的耦合关系。将
- 在javascript中原型(prototype)定义了特定类型的所有实例都可以访问的属性和方法，很多些情况下需要重新对原型中的属性赋值，如
- 前言上一篇介绍了服务端流式RPC，客户端发送请求到服务器，拿到一个流去读取返回的消息序列。 客户端读取返回的流的数据。本篇将介绍客户端流式R
- 前言学习Python的初衷是因为它的实践的便捷性，几乎计算机上能完成的各种操作都能在Python上找到解决途径。平时工作需要在线学习。而在线
- 本文实例讲述了Python数据结构与算法之图的最短路径(Dijkstra算法)。分享给大家供大家参考，具体如下：# coding:utf-8
- 之前修改两张及以上表的时候，总得需要用几次语句才修改，万一其中一条没修改上，又没事务机制的话，处理很麻烦，于是想到能不能一条语句完成呢？ 结
- 前言：要说小时候称霸所有翻盖手机的小游戏，除了贪吃蛇，那就是推箱子了。控制小人将所有箱子放到指定位置，就是这样简简单单的操作，陪伴我度过了无
- 最近为了做Hyperledger Fabric国密改造，涉及到了golang源码的改动。特将操作过程整理如下，以供参考：golang的源码安
- 在 SQL Server 中可以这样处理： if not exists (select 1 from t where id = 1
- 在我们生活中的一些场合经常会有一些不该出现的敏感词，我们通常会使用*去屏蔽它，例如：尼玛 -> **，一些骂人的敏感词和一些政治敏感词
- centos下安装配置phpmyadmin，我花了二个晚上，郁闷的我不行，配置phpmyadmin简单吧，很简单，我刚工作的时候，就配置过，
- 1、后单下划线例如: data_其实这种就是为了防止跟系统关键字重名了，比如 python 里是不是有个关键字 class但是我也想用 cl
- Sql代码 CREATE TABLE test(a VARCHAR2( 20),b VARCHAR2 (20),c NUMBER,d VAR
- 问：假如我的一个表里含有(a,b,c,d)和(a,b)形成组合键。我能在列值中写这个查询吗？例如： select a,c,d from my
- 我的主要思路是：Excel -> Html -> Image代码如下：# -*- coding:utf-8 -*-__autho
- 本文实例讲述了Python堆排序原理与实现方法。分享给大家供大家参考，具体如下：在这里要事先说明一下我也是新手，很多东西我了解不是很深入，写
- 网上也有很多封装好的JS动画库，但大多因为功能过于完善，而至于代码量大动辄过千行，不宜在小项目中使用。这里自己封装了一个很轻量的动画库，主要
