第五种方法：

首先设置一个div，设置其的width与height，为了方便观察，我定义了div的背景色为red，代码如下：

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

#content {

    height: 240px;

    width: 300px;

    background-color: red;

}

  </style>

</head>

<body>

<div id="content"> Content here</div>

</body>

</html>

效果如下图显示：

现在图片并没有什么居中的显示，接下来要描述的居中方法主要借助position方法，将div的position方式设置为absolute，然后可以设置其left=0，right=0，由于其有宽度，所以接下来设置margin:auto，就可以实现div的水平居中，代码如下：

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

#content {

    height: 240px;

    width: 300px;

    position: absolute;

    left: 0;

    right: 0;

    margin: auto;

    background-color: red;

}

  </style>

</head>

<body>

<div id="content"> Content here</div>

</body>

</html>

效果如下图所示：

同理，由于div有高度，只要设置top=0，buttom=0，在margin为auto的作用下，可以实现其垂直居中，代码如下所示：

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

#content {

    height: 240px;

    width: 300px;

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    margin: auto;

    background-color: red;

}

  </style>

</head>

<body>

<div id="content"> Content here</div>

</body>

</html>

效果如下所示：

这种方法思路可以单独设置元素的水平居中与垂直居中，且思路简单，但是在IE8 beta中无效

css水平垂直居中方法（一）的更多相关文章

  1. css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  2. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  3. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...

  4. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  5. CSS水平垂直居中的几种方法

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  6. 介绍一种css水平垂直居中的方法（非常好用！）

    这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...

  7. CSS中图片水平垂直居中方法小结

    写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...

  8. css水平垂直居中的方法与 vertical-align 的用法

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. 已知元素宽度 方法一:已知宽高,可以用position定位 + margin负值的方法 : 绝对定位 ...

  9. CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）

    本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...

随机推荐

  1. 机器学习三剑客之Numpy

      Numpy NumPy是Python语言的一个扩充程序库.支持高级大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库.Numpy内部解除了Python的PIL(全局解释器锁),运算效 ...

  2. jquery的队列问题

    队列,可以当成一个数组,也可以当成一个空间. 使用的地方: 在js这种异步操作的时候,我们不知道什么时候一个js代码加载完成,并且你还要保护一段代码只有一个模块在执行(按需加载的时候) 这个时候我们就 ...

  3. 打包的时候遇上找不到dll文件错误

    1.保证dll文件和EXE文件处于同级目录下 我是在EXE同级文件目录下建立了一个Plugins文件并把dll文件夹放在这里面 2.但是因为建立的目录是x86_64,所以如果打包成windows平台选 ...

  4. HANA Architecture

    1 HANA 是基于内存计算的.行列都支持.使用列存储,列存储的特点是高压缩,查询快,节约空间, ---SAP HANA supports both, but is particularly opti ...

  5. [转载]java读写word文档，完美解决方案

    做项目的过程中,经常需要把数据里里的数据读出来,经过加工,以word格式输出. 在网上找了很多解决方案都不太理想,偶尔发现了PageOffice,一个国产的Office插件,开发调用非常简单!比网上介 ...

  6. Eclipse插件开发_学习_01_Maven+Tycho 构建RCP程序

    二.参考资料 1.用Tycho来构建你的RCP程序(一) —— Plugin

  7. POJ--1094--Sorting It All Out||NYOJ--349--Sorting It All Out（拓扑排序）

    NYOJ的数据水一点,POJ过了是真的过了 /* 拓扑排序模板题: 每次输入都要判断有环与有序的情况,如果存在环路或者已经有序可以输出则跳过下面的输入 判断有序,通过是否在一个以上的入度为0的点,存在 ...

  8. pcre函数详解

    PCRE是一个NFA正则引擎,不然不能提供完全与Perl一致的正则语法功能.但它同时也实现了DFA,只是满足数学意义上的正则. PCRE提供了19个接口函数,为了简单介绍,使用PCRE内带的测试程序( ...

  9. Linux中几个实用快捷键

    返回上层目录: cd .. 命令提示符: user@ubuntu: @之前的部分为当前用户ID名称:  @之后冒号之前是主机名称 sudo :(Superusers Do) 以超级用户执行 在相对路径 ...

  10. cocos2dx混合模式应用———制作新手引导高亮区域 （2.2.0）

    cocos2dx混合模式应用———制作新手引导高亮区域 转自:http://www.cnblogs.com/mrblue/p/3455775.html 首先,效果预览一下 高亮区域的图片: 示例代码: ...