第一:在页面中使用 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. Spring SpEL in JSP and Assign SpEL value to Java variable in JSP

    Spring SpEL in JSP and Assign SpEL value to Java variable in JSP method 1 use----ServletContextAttri ...

  2. <Sicily>数字反转

    一.题目描述 给定一个整数,请将该数各个位上数字反转得到一个新数.新数也应满足整数的常见形式,即除非给定的原数为零,否则反转后得到的新数的最高位数字不应为零(参见样例2). 二.输入 输入共 1 行, ...

  3. HDU 4324 Triangle LOVE【拓扑排序】

    题意:给出n个人,如果a喜欢b,那么b一定不喜欢a,如果b不喜欢a,那么a一定喜欢b 就是这n个点里面的任意两点都存在一条单向的边, 所以如果这n个点不能构成拓扑序列的话,就一定成环了,成环的话就一定 ...

  4. ReactiveCocoa使用记录-网络登录事件

    对于一个应用来说,绝大部分的时间都是在等待某些事件的发生或响应某些状态的变化,比如用户的触摸事件.应用进入后台.网络请求成功刷新界面等等,而维护这些状态的变化,常常会使代码变得非常复杂,难以扩展.而 ...

  5. Java Web Application——servlet

    概述 是一个部署于web服务器中的实现了servlet接口的Java类,用于响应web请求 Web容器(也称为servlet容器)本质上是与servlet交互的Web服务器的组件.Web容器负责管理s ...

  6. 使用PXE+NFS EFI引导安装RHEL6/7以及Kickstart安装

    PXE引导的步骤: 1.开机后选择网络启动,client端向server端的dhcpd发起获取IP地址的dhcp请求. 2.server端分配IP后,dhcpd会同时根据其配置文件,通过TFTP协议发 ...

  7. div和css:行内元素和块元素的水平和垂直居中

    行内元素: 水平居中:text-align:center ul水平居中:加 display:table; margin:0 auto; 此元素会作为块级表格来显示(类似 <table>), ...

  8. 中断函数中不能使用printf的原因

    vxworks 中断处理程序之所以不用printf,本质在于printf是将信息输出到标准输出设备(STDOUT)中, 整个标准输出设备是一个全局变量,由于有semTake操作,那么就会发生阻塞,vx ...

  9. C++11之decltype

    使用场景 在C++中常常要用到非常长的变量名.假设已经有变量和你将使用的变量是一个类型.就可以使用decltypekeyword 来申明一样的类型变量. decltype原理      返回现有变量类 ...

  10. 给一个执行在windows 7和NAT下的VMWARE虚拟机分配固定IP

    虚拟机上装了个oracleserver,每次vmware重新启动或者resume时总要分配新的IP地址,这样就得改动windows下的client配置,所以须要想办法把IP地址固定住. DHCP服务在 ...