第一:在页面中使用 margin: 0 auto;居中;

<div>

  <p>夜屋</p>

</div>

div {
  width: 100%;
  position: relative;
  background-color: red;
}
p {
  width: 800px;
  margin: 0 auto;
  background-color: #ccc;
}

第二:在页面中使用 left 及margin-left;

<style type="text/css">
*{
  padding: 0px;
  margin: 0px;
}
.wrap{
  width:400px;
  height:300px;
  margin:10px;
  border:1px solid #000;
}
.centerDiv{
  display: block;
  width:200px;
  height:200px;
  background-color:#69F;
  top:50%;
  left:50%;
  margin:-100px 0 0 -100px;
}
</style>

<div class="wrap">
  <div class="centerDiv">上下左右居中方法2</div>
</div>

注意:需要垂直并且水平居中的元素必须是div,其他p类等块级元素用此方法不会居中(垂直和水平居中),若是用了非div元素,显示如下;

<div class="wrap"> 
  <p class="centerDiv">上下左右居中方法2</p> 
</div>

第三、图片的垂直居中,使用display: table-cell;

div {
  width: 289px;
  height: 1000px;
  display: table-cell;
  vertical-align: middle;
  background-color: Gray;
}

<div>
  <img src="../images/canvas.jpg" width="333" height="500">
</div>

html页面中块级元素的居中的更多相关文章

  1. 《Web开发中块级元素与行内元素的区分》

    一.块级元素的特性: 占据一整行,总是重起一行并且后面的元素也必须另起一行显示. HTML中块级元素列举如下: address(联系方式信息) article(文章内容) aside(伴随内容) au ...

  2. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

  3. [转载]css菜鸟之HTML 中块级元素设置 height:100% 的实现

    HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...

  4. css菜鸟之HTML 中块级元素设置 height:100% 的实现

    HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...

  5. css中块级元素、内联元素(行内元素、内嵌元素)

    Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...

  6. html中块级元素和行内元素

    块级元素和行内元素的三个区别 1.行内元素与块级元素直观上的区别: 行内元素会在一条直线上排列,都是同一行,水平方向排列 块级元素独占一行,垂直方向排列.块级元素从新行开始结束接着一个断行 2.块级元 ...

  7. HTML中块级元素与行内元素

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  8. HTML中块级元素和行内元素的总结和区分。

    HTML标签 html标签定义: 是由一对尖括号包裹的单词构成,例如: <html>. 标签不区分大小写<html> 和 <HTML>, 推荐使用小写. 标签分为两 ...

  9. HTML中块级元素与内联元素有什么区别 ?

    块级元素:默认宽度是100%(继承自父元素),如果块对象没有采用“float:left”或“float:right;”的样式,相邻的两个块对象就会分排在不同的两行上.例如,div, p, h1, fo ...

随机推荐

  1. DedeCMS文章编辑不更新时间1970年1月1日

    在修改文章或者后期优化的时候,织梦dedecms5.7版本存在一个问题,修改文章的同时也修改了文章的发布时间,这个功能可能有些人比较需要,但同时也有些站长朋友又不需要,因为我们编辑某个文章的时候,发现 ...

  2. python在leecode刷题-第一题和第七题

    class Solution(object): def twoSum(self, nums, target): """ :type nums: List[int] num ...

  3. Linux下切换python版本

    http://www.cnblogs.com/rhjeans/p/5499193.html

  4. 洛谷 P3663 [USACO17FEB]Why Did the Cow Cross the Road III S

    P3663 [USACO17FEB]Why Did the Cow Cross the Road III S 题目描述 Why did the cow cross the road? Well, on ...

  5. ZooKeeper 特性

    ZooKeeper 拥有一个层次的命名空间.(like distributed)       注意:ZooKeeper 中不许使用相对路径.   一    ZooKeeper 数据模型         ...

  6. Nginx 性能调优

    原文地址:http://nginx.com/blog/tuning-nginx/ Tuning NGINX for Performance Nginx 性能调优 NGINX is well known ...

  7. Android 五大存储方式具体解释

    SharedPreferences与Editor SharedPreferences保存的数据仅仅要是类似于配置信息格式的数据.因此它保存的数据主要是简单的key-value对形式.以下关系图 上图全 ...

  8. Exchange2003迁移2010DAG的权限问题

    exchange2010无法删除用户.在2010的控制台中新建一个通讯组.然后将它删除就会报告下面错误. MicrosoftExchange 错误:无法对对象"test"执行&qu ...

  9. SpringMVC 常见异常处理

    1.javax.xml.bind.UnmarshalException: unexpected element (uri:"", local:"request" ...

  10. 灵活的运用Model类

    1.定义接口 using System; using System.Collections.Generic; using System.Linq; using System.Web; namespac ...