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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

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

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

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

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

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

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

转自http://blog.csdn.net/github_37037281/article/details/55510401

HTML水平居中和垂直居中

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

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

方法一:运用flex布局 .app{width: 500px;height: 500px;background: green;}...

图片水平垂直居中css

  • 2010-05-20 15:19
  • 44KB
  • 下载

关于元素水平垂直居中的那些事?

中国式的美,总是少不了对称美的存在。对称美,存在于建筑之上,也巧秀于美食之中。对称之美,中国之风!美,用户体验的一种,作为用户体验的打造者,我们是不是也应该知道些有关于前端开发中的对称美呢?那我们大前...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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