html内容垂直、水平居中

原创 2007年09月27日 20:16:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<title> New Document </title> 
<style>
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
#outer{
height: 100%;
width: 100%;
display: table;
*position: relative;
*overflow: hidden;
}
#middle{
display: table-cell;
vertical-align: middle;
*position: absolute;
*top: 50%;
}
#inner {
width: 400px;
margin: 0 auto;
*position: relative;
*top: -50%;
}
</style> 
</head> 
<body> 
<div id="outer">
  <div id="middle">
      <div id="inner" style="background: red;height: 500px;">
          <p>asdfasdf</p>
          <p>asdf</p>
      </div>
  </div>
</div>
</body> 
</html>

如何让一个方块上下左右居中

//构造函数;(function($, window, document,undefined){ var MaskLayer = function(ele, opt){ this....

html中表格table的内容水平和垂直居中显示

html中表格table的内容居中显示 在CSS样式文件中指定#class td /*设置表格文字左右和上下居中对齐*/ { vertical-align: middle; t...

div中内容水平垂直居中

1. div高度自适应的情况     div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的,     想要看的...

html中div如何水平和垂直居中的几种css方法代码

一、记录下几种盒子居中的方法: 1、margin固定宽高居中; 2、负margin居中; 3、绝对定位居中; 4、table-cell居中; 5、flex居中; 6、transform居中...

HTML篇之CSS样式——CSS水平垂直居中对齐(多种方式)

用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作。接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处。  方法一:  ...

收银台界面 计算器html+css 块水平垂直居中

参考效果 实现效果 收款 *{padding:0px;margin:0px;} p { display: block; -webkit-margin-bef...

div内容水平居中、垂直居中

水平居中:text-align:center;垂直居中:display:table-cell;vertical-align:middle;css代码: .tableDiv{ display:tab...

HTML水平居中和垂直居中

1.水平居中 (1) 文本、图片等行内元素的水平居中   给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。 (2) 确定宽度的块级元素的水平居中...

html中的垂直居中和水平居中

方法一:运用flex布局 .app{width: 500px;height: 500px;background: green;}...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html内容垂直、水平居中
举报原因:
原因补充:

(最多只允许输入30个字)