<!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. C语言中字符串常用函数--strcat，strcpy

    strcpy 原型声明:extern char *strcpy(char* dest, const char *src); 头文件:#include <string.h> 功能:把从src ...

  2. 敏捷测试（2）--ATDD概念

    什么是验收测试驱动开发 在准备实施一个功能或特性之前,首先团队需要定义出期望的质量标准和验收细则,以明确而且达成共识的验收测试计划(包含一系列测试场景)来驱动开发人员的TDD实践和测试人员的测试脚本开 ...

  3. Python学习笔记 - 字符串和编码

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- #第一行注释是为了告诉Linux/OS X系统, #这是一个Python可执行程序,Windows系统会忽 ...

  4. javascript语法之String对象

    学习String类就是学习它的一些方法,主要用到方法全部罗列出来.如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

  5. AngularJS进阶(三十五)浏览器兼容性解决之道

    浏览器兼容性解决之道 前言 浏览器兼容性一直是前端开发中不得不面对的一个问题.而最突出的就是IE.对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹.所以,常见的兼容性下限是IE8 ...

  6. 《java入门第一季》之类小案例（模拟用户登录）

    首先是做一个用户登录的小案例.在此基础上加入其它逻辑. import java.util.Scanner; /* * 模拟登录,给三次机会,并提示还有几次.如果登录成功,就可以玩猜数字小游戏了. * ...

  7. AngularJS进阶(二十七)实现二维码信息的集成思路

    AngularJS实现二维码信息的集成思路        赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,与君共勉!      注:点击此处进行知识充电 ...

  8. mysql进阶(十八)完全卸载mysql数据库图文教程

    完全卸载mysql数据库图文教程 有时候MySQL不能完全卸载,这时候必须通过一些途径删除掉注册表和一些残余的文件,然后才能重新安装才可以成功! 方法/步骤 1.控制面板-->所有控制面板项-- ...

  9. 《java入门第一季》之面向对象面试题（代码块一网打尽）

    <pre name="code" class="java">/* 代码块:在Java中,使用{}括起来的代码被称为代码块. 根据其位置和声明的不同, ...

  10. 仿百度壁纸客户端（二）——主页自定义ViewPager广告定时轮播图

    仿百度壁纸客户端(二)--主页自定义ViewPager广告定时轮播图 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端( ...