<!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. Bootstrap模板代码+页面自适应页面的案例代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. Web Service进阶(六)SOAPBinding绑定方式异常 is not found. Have you run APT to generate them

    当在类中填充相应方法时,提示如下错误: 出现以上错误的原因就是在注解中没有添加@SOAPBinding(style=SOAPBinding.Style.RPC)这句话.估计也与JDK的版本相关,这方面 ...

  3. C++ Primer 有感（标准库vector及迭代器）

    vector是同一种对象的集合,每个对象都有一个对应的整数索引值.和string对象一样,标准库将负责管理与存储元素相关的类存.引入头文件 #include<vector> 1.vecto ...

  4. C语言的布尔类型(_Bool)

    也许很多人都和我一样,不知道现在的C语言已经有了布尔型:从C99标准开始,类型名字为"_Bool". 在此之前的C语言中,使用整型int来表示真假.在输入时:使用非零值表示真:零值 ...

  5. Touch Handling in Cocos2D 3.x(一)

    原帖地址 Cocos2d 3.0 带来经过完全修正后的触摸处理系统.本篇博文将提供所有触摸相关的信息: 接收触摸 取得触摸位置 处理不同个触摸生命周期中的事件 实现一个拖放机制 让我们开始吧 ;) 通 ...

  6. JSP编译成Servlet（四）JSP与Java行关系映射

    我们知道java虚拟机只认识class文件,要在虚拟机上运行就必须要遵守class文件格式,所以JSP编译成servlet后还需要进一步编译成class文件,但从JSP文件到java文件再到class ...

  7. of这个变态

    英式口语还能听懂,一到美式,连读,爆破,就让人疯掉. 尤其big bang theory, of就是个变态,其读法有,英[əv, əv, v, f] 美[əv, ɑv,əv].但大部分都是/əv/. ...

  8. SpriteBuilder中节点的%位置移动

    在SpriteBuilder中可以将一个节点的位置设为%形式,这意味着在不同的屏幕尺寸中,该节点会定位在相对同一个位置. 比如x和y分别为 50%和50%的位置,在各种屏幕中都会定位到屏幕的中心. 但 ...

  9. 预装WIN8的电脑是GPT分区模式，无法安装WIN7

    本人的笔记本自带的是WIN8系统,现在想安装WIN7的系统,但是安装不了,提示"windows无法安装到这个磁盘.选中的磁盘采用GPT分区形式". 通过上网搜索得知WIN7一般安装 ...

  10. 生产者消费者的java实现

    先看最简单的,也就是缓冲区的容量为1 缓冲区容量为1 import java.util.List; public class ProducerAndConsumer2 { static class A ...