第五种方法：

首先设置一个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. CEF3.2623使用记录：windows编译

    CEF3.2623使用记录:windows编译 1:cef3.2623下载地址 2623是cef3最后一个支持xp系统的版本,且可以支持html的audio标签,可以用作对html音频的处理下载地址为 ...

  2. Ubuntu18.04 升级python3后 安装pip3 后报错

    pip3 -VTraceback (most recent call last): File , in <module> from pip._internal import main Mo ...

  3. dp4--codeVs1043 方格取数

    dp4--codeVs1043 方格取数 一.心得 二.题目 1043 方格取数 2000年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Dia ...

  4. 持续集成平台jenkins

    一. 什么是持续集成 1. 概念 持续集成(Continuous Integration),也就是我们经常说的CI 持续集成(CI)是一种实践,可以让团队在持续的基础上收到反馈并进行改进,不必等到开发 ...

  5. 解决：return _compile(pattern, flags).search(string) TypeError: expected string or buffer

    今天写爬虫,爬取MM图片页面的标题时,遇到了一个问题,上图: 看看我的代码: import urllib import urllib2 import re class JPMSG: def __ini ...

  6. poj2778 ac自动机+矩阵快速幂

    给m个子串,求长度为n的不包含子串的母串数,最直接的应该是暴搜,肯定tle,考虑用ac自动机 将子串建成字典树,通过next表来构造矩阵,然后用矩阵快速幂求长度为n的数量 邻接矩阵https://we ...

  7. javascript中some，every，map，filter是只用和ansyc中的each，eachLimit，map，mapLImit，filter的使用

    var t = [1,2,3,4,5]; //some找到数组中第一个符合要求的值后就不在继续执行//用来判断数组中是否存符合要求的值,返回结果true|false//function返回类型为boo ...

  8. 51nod 1732 LCS变形

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1732 1732 51nod婚姻介绍所 题目来源: 原创 基准时间限制:1 ...

  9. nyojb 2359 巴什博弈变形

    http://acm.nyist.me/JudgeOnline/problem.php?id=2359 2359: 巴什博弈? 时间限制: 1 Sec  内存限制: 30 MB提交: 237  解决: ...

  10. tableau 常识积累

    没怎么在业务系统中使用过,所以需要好好积累.看起来很简单的东西都需要慢慢来用.下了一份它的官方文档10.3版本的.公司网络限制,不能去它官网学习.只有下班时间了. 先说一个,有时候度量值它和HANA类 ...