<!DOCTYPE html PUBLIC "-//W3C//Ddiv XHTML 1.0 divansitional//EN" "http://www.w3.org/div/xhtml1/Ddiv/xhtml1-divansitional.ddiv">

<!-- saved from url=(0080)http://emap.shasm.gov.cn/TianDiTuSX/ResourceCenter/ServiceDetailInfo.aspx?ID=770 -->

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

</head>

<body>

<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>

  <div class="verticalAlign"></div><!--定位元素，页面不显示，只为页面容器整体垂直对齐作参照-->

  <div class="divAll"><!--父级垂直居中-->

<!--子级上中下排列-->

        <div id='divTop' class="divTop">aaaaaaaa

        </div>

        <div id='divBody' class="divBody">设置上下左右的相对位置为0，可避免超出范围出现滚动条</br>设置上下左右的相对位置为0，可避免超出范围出现滚动条</br>设置上下左右的相对位置为0，可避免超出范围出现滚动条</br>设置上下左右的相对位置为0，可避免超出范围出现滚动条</br>设置上下左右的相对位置为0，可避免超出范围出现滚动条</br>设置上下左右的相对位置为0，可避免超出范围出现滚动条</br>设置上下左右的相对位置为0，可避免超出范围出现滚动条</br>

        </div>

        <div id='divBottom' class="divBottom">

        ddddd

        </div>

  </div>

</body>

</html>

<style>

/*css样例（divPosition.css）*/

html,body{

    height: 100%;/*设置html和body的width和height为100%，可使全屏生效*/

    width: 100%;

    font-size: 16px;

    font-family: 微软雅黑, 宋体, 黑体;

    color: #535353;

    margin: 0px; /*设置上下左右的相对位置为0，可避免超出范围出现滚动条*/

}

body {

    white-space: nowrap;/*设置white-space:nowrap，同时在相对参照元素中线居中时设定display:inline-block，可避免浏览器缩放时，垂直居中的容器换行*/

    text-align: center;/*设置text-align: center，可使子容器水平对齐*/

}

div {

    display: inline-block;/*div内联不换行，ie8和ie9不识别带*的样式，只执行第一个display，ie6和ie7识别带*的样式，执行第二个display和zoom*/

 *display:inline;/*ie6和ie7兼容display: inline-block，以【*display:inline;*zoom:1;】代替*/

 *zoom:1;

}

.verticalAlign {

    vertical-align: middle;/*设置vertical-align: middle，可使此和同一级别元素中线对齐*/

    height: 100%;

    width: 0px;    /*设置width:0px，可使此元素不显示，只为页面容器整体垂直对齐作参照*/

    border: none;

    padding: 0px;

    margin: 0px 0px 0px -5px;/*设置mrgin-right:-5px，避免容器横向超出*/

}

.divAll {

    width: 100%;

    height: auto;

    vertical-align: middle;/*设置vertical-align: middle，相对同一级别元素中线对齐*/

    margin: 0px;

    border: none;

    padding: 0px;

}

/*以上为父级垂直居中，以下为子级上中下排列*/

.divBody {

    width: 100%;

    min-width: 900px;

    vertical-align: middle;/*设置vertical-align: middle，相对同一级别元素中线对齐*/

    margin: 0px;

    border: none;

    padding: 0px;

}

.divTop {

    background-image: url(../images/serviceDetail_logo.png);

    background-repeat: no-repeat;

    height: 61px;

    width: 80%;

    min-width: 900px;

    margin-left: auto;/*设置高度，并设置margin的left和right为auto，在非absolute情况下可水平居中*/

    margin-right: auto;

    border-bottom: 5px solid #ff8a00;

    vertical-align: top;/*设置vertical-align: top，相对同一级别元顶端对齐*/

    display: block;/*div内联换行*/

}

.divBottom {

    width: 100%;

    min-width: 900px;

    height: 100px;

    margin: 0px;

    vertical-align: bottom;/*设置vertical-align: bottom，相对同一级别元素底端对齐*/

    display: block;

}

</style>

html居中定位的更多相关文章

  1. 关于IE 浏览器的position居中定位的问题和 行块元素的设置问题

    这两天在写页面时,遇到一些IE浏览器显示不正常的问题,主要有两个: 1. 在td 中设置span 元素水平垂直居中,在谷歌浏览器中可以正常显示,但是在IE 中却无法显示出想要的结果,即不能实现垂直水平 ...

  2. 0029 定位：position（相对、绝对、固定、绝对定位盒子居中、z-index、绝对定位改变display属性）

    目标 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布局的三种机制 网页布局的核心 -- 就是 ...

  3. CSS常见居中讨论

    先来一个常见的案例,把一张图片和下方文字进行居中: 首先处理左右居中,考虑到img是一个行内元素,下方的文字内容也是行内元素,因此直接用text-align即可: <style> .con ...

  4. css div居中显示的4种写法

    Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...

  5. 实现Canvas2D绘图 使元素绕中心居中旋转

    我之前用canvas写了个头像剪切的demo,但是关于让载入的图片旋转是个问题,虽然通过其它方法实现了,但是感觉并不太好,于是查了些资料,想试着重新做一下canvas的旋转. 在开始之前,先让我们来做 ...

  6. div实现水平和垂直都居中的三个超实用的方法

    本文仅仅介绍作者认为的三种不错的方式, 方式一:transform: translate(-50%,-50%)  示例代码如下: .div{ position: absolute; top: 50%; ...

  7. 详解 CSS 居中布局技巧

    水平居中元素: 通用方法,元素的宽高未知 方式一:CSS3 transform .parent { position: relative; } .child { position: absolute; ...

  8. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

  9. 详解CSS居中布局技巧

    本文转自:https://zhuanlan.zhihu.com/p/25068655#showWechatShareTip一.水平居中元素: 1.通用方法,元素的宽高未知方式一:CSS3 transf ...

随机推荐

  1. Device Tree Usage(理解DTS文件语法)

    Basic Data Format The device tree is a simple tree structure of nodes and properties. Properties are ...

  2. SQL Server扫盲系列——镜像篇

    为方便查看,并以专题形式展示,所以我会把一些文章整合起来.本部分为SQL Server镜像系列: 本文出处:http://blog.csdn.net/dba_huangzj/article/detai ...

  3. 小强的HTML5移动开发之路（19）——HTML5 Local Storage（本地存储）

    来自:http://blog.csdn.net/dawanganban/article/details/18218701 一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedO ...

  4. shell sed过滤器详解

    1. Sed简介sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(pattern space),接着用sed命令处理缓冲区中 ...

  5. Java集合之Collection

    Java集合是java提供的工具包,包含了常用的数据结构:集合.链表.队列.栈.数组.映射等.Java集合工具包位置是java.util.* Java集合主要可以划分为4个部分:List列表.Set集 ...

  6. （十）弹出框Alert与ActionSheet

    第一种方式:中间弹窗 从中间弹出的窗口称为AlertView. 可以设置多个按钮,取消按钮会放在对右端或者最下端,按钮超过两个,会竖着排列. UIAlertView *alert = [[[UIAle ...

  7. Mahout 算法

    Mahout 包括协同过滤,基于User和Item的推荐:kmeans.Fuzzy-kmeans .Mean shift .Dirichlet process .LDA聚类:奇异值分解:并行频繁项集挖 ...

  8. 【翻译】Sencha Touch 2入门：创建一个实用的天气应用程序之三

    原文:Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 3) 作者:Lee BoonstraLee is a ...

  9. web容器的会话机制

    基本所有web应用开发的朋友都很熟悉session会话这个概念,在某个特定时间内,我们说可以在一个会话中存储某些状态,需要的时候又可以把状态取出来,这整个过程的时间空间可以抽象成"会话&qu ...

  10. 中国象棋游戏Chess（1） - 棋盘绘制以及棋子的绘制

    本项目都使用QT来实现绘图,没有任何第三方的资源. 工程详情:Github 首先将棋盘设计为一个类Board // Board.h // Board类实现了棋盘的绘制以及显示 // #ifndef B ...