html居中定位

时间：2022-06-26 00:17:32
<!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颜色属性&comma;字体文本和背景属性&comma;边框属性&comma;margin和padding&comma;盒模型&comma;行内块转换&comma;浮动&comma;三大定位

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

  9. 详解CSS居中布局技巧

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

随机推荐

  1. shell 学习基地

    http://blog.csdn.net/column/details/shell-daily-study.html?&page=2

  2. php中include文件变量作用域的研究

    原文:php中include文件变量作用域的研究 在php中我们有时候需要include一个文件.比如我前段时间在写一个框架的时候,打算用原生的php作为模板,然后写一个display方法引入模板文件 ...

  3. TensorFlow实战之实现AlexNet经典卷积神经网络

    本文根据最近学习TensorFlow书籍网络文章的情况,特将一些学习心得做了总结,详情如下.如有不当之处,请各位大拿多多指点,在此谢过. 一.AlexNet模型及其基本原理阐述 1.关于AlexNet ...

  4. CentOS一般用户和root用户之间的切换

    如果终端提示符显示为"$",表明该用户为普通用户.输入su,回车,然后输入root密码,即可切换到root用户.如果是root用户想切换回普通用户,输入"su 用户名&q ...

  5. Python两个栈实现一个队列

    牛客网原题: 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型.   实现这个算法的方式有很多种,这里就写一种比较简单易懂的:虽然可能算法和效率上不太出色,当大多数人 ...

  6. python高级（1）—— 基础回顾1

    Python基础回顾 认识变量 在学习了之前的Python零基础入门系列[洗礼灵魂,修炼Python](说明一下,这个系列现在回过来再来看这个名字确实好土啊,然后有些知识点感觉还不太精准,后期看如果有 ...

  7. Golang， 以 9 个简短代码片段，弄懂 defer 的使用特点

    作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...

  8. mysql的密码忘记了怎么办

    我们的大脑不是电脑,有些东西难免会忘,但是会了这个再也不担心宝宝忘记密码了 (1)点击开始/控制面板/服务/mysql-->右击mysql看属性,里面有mysql的安装地址,然后找到安装地址进行 ...

  9. The Little Prince-12&sol;11

    The Little Prince-12/11 最后一段话!!!hha,傻傻的我们...... 成人们对数字情有独钟.如果你为他们介绍一个朋友,他们从不会问你“他的嗓子怎么样?他爱玩什么游戏?他会采集 ...

  10. 【原】ATI显卡设置双显示器

    Ubuntu 12.04系统下加上增加一个显示器后,一直只能镜像显示,或只能用笔记本的屏幕显示,另一个屏幕无法使用了,上网搜索了一下解决办法,通过下面的方法可以解决问题: 编辑/etc/X11/xor ...

相关文章