<!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. 四大组件之 BroadcastReceiver小结

    总结提高,与君共勉 1. BroadcastReceiver是什么? BroadcastReceiver也就是"广播接收者"的意思,顾名思义,它就是用来接收来自系统和应用中的广播. ...

  2. 学习tornado：模板

    第一次接触tornado的template,是在做oastub的时候,因为一位同学在handler里面硬编码了html代码,我决定引入template机制来降低逻辑与页面的耦合. 简介 tornado ...

  3. C# BarCodeToHTML条码生成类

    来自:http://www.sufeinet.com/forum.php?mod=viewthread&tid=656&extra=page%3D1%26filter%3Dtypeid ...

  4. NIO模式例子

    NIO模式主要优势是体现在对多连接的管理,对众多连接各种事件的转发让处理变得更加高效,所以一般是服务器端才会使用NIO模式,而对于客户端为了方便及习惯使用阻塞模式的Socket进行通信.所以NIO模式 ...

  5. 【一天一道LeetCode】#13. Roman to Integer

    一天一道LeetCode系列 (一)题目 Given a roman numeral, convert it to an integer. Input is guaranteed to be with ...

  6. /etc/fstab文件出错,无法进入Linux系统

    问题描述 今天复习Linux文件系统管理,在Linux系统上挂载了一块新硬盘之后,然后分区,格式化,一步步走下来,为了能够使该硬盘在系统启动时自动挂载,于是将之写入了/etc/fstab文件,然而在r ...

  7. C语言获取系统时间的函数

    在标准C编程中,我们如何写程序来获取当前系统的时间呢? 获取系统时间的函数 #include <time.h> time_t  time(time_t  *t) 参数:如果参数不为空,那么 ...

  8. Erlang cowboy 处理不规范的客户端

    Erlang cowboy 处理不规范的客户端 Cowboy 1.0 参考 本章: Dealing with broken clients 存在许多HTTP协议的实现版本.许多广泛使用的客户端,如浏览 ...

  9. 在AndroidManifest.xml文件中设置Android程序的启动界面方法

    从网上搜集了一堆的Android代码,比如Android的Login程序和Android的Helloworld程序,但是却总不能正确运行一个正确的程序,郁闷了很久,终于在一次一次的测试后成功的在And ...

  10. HBase学习资源

    教程 <HBase.Administration.Cookbook>  中文版<HBase管理指南> <HBase in action> <HBase权威指南 ...