看了一些代码，然后自己试验了一番，分享如下示例：

实现点： 如果元素的宽高固定,那么,css指定样式为top:50%;left:50%; 而margin-top和 margin-left 指定为负数，绝对值为自身宽高的一半

当然，position也需要指定为absolute,或者relative.

如果要在某个父级元素内居中，那么父元素也需要指定CSS的position属性。

如果有边框，那么，margin元素需要做一点微调。

代码如下：

<!DOCTYPE html>
<html>
 <head>
  <title> 固定宽高的元素居中示例 </title>
  <style>
	.content{
		width: 400px;
		height: 300px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -200px;
		margin-top: -150px;
		background-color: #8888CC;
	}
  </style>
 </head>

 <body>
  <div class="content">
	<p>指定页面居中的元素</p>
  </div>
 </body>
</html>

原理就是这样，最近看到一篇文章，讲解的很明了:

http://www.webhek.com/vertical-align/

固定宽高的DIV绝对居中示例的更多相关文章

  1. div 固定宽高 水平垂直居中方法

    div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...

  2. css实现不定宽高的div水平、垂直居中

    一共有三个方案: 1,第一种方案主要使用了css3中transform进行元素偏移,效果非常好 这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示.  兼容方面也一样拿IE来做比较,第二种方法IE ...

  3. 实现可调整宽高的DIV（左右拖动和上下拖动）

    前言 本例是在React中实现,不过改一改通过原生js也很好实现,另外兼容性也做到了IE9.(IE8讲道理也是可以的). 首先看一下需要实现的需求: 要拖动图中的白色横条调整绿色和蓝色区域的高度,要拖 ...

  4. 不定宽高的DIV，垂直水平居中

    1.怎么让一个不定宽高的DIV,垂直水平居中? 答:1)使用CSS方法. 父盒子设置: display:table-cell; text-align:center; vertical-align:mi ...

  5. css中固定宽高div与不固定宽高div垂直居中的处理办法

    固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...

  6. table 与 div 固定宽高问题

    div {width:100px;height:200px;word-wrap: break-word;overflow:hidden;} 这个可以固定div的宽高,溢出内容会被剪除. table{t ...

  7. 我的前端组件 ---- 16:9固定宽高比例的div

    目标:遇到一个需求,让图片在页面中,不管宽度如何变化.宽高保持16:9的比例. 实现: 方法一:这也是比较经典的一个方法,利用padding-bottom来实现. <!DOCTYPE html& ...

  8. 偏前端 - 不是固定宽高，页面随设备同比 放大/缩小 展示。不妨看看rem单位，你就有眉目上手做了！！！

    为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类 ...

  9. 已知宽高和未知宽高的div块的水平垂直居中

    //已知宽高的情况 .div1_container{     border:1px solid #00ee00;     height:300px;     position:relative; } ...

随机推荐

  1. eclipse的maven操作无反应

    第一 查eclipse能不能正常用 hi world.java 第二 查maven能不能正常用 cmd: mvn -v 第三 看看maven和eclipse是不是64位之类的 第四 maven和ecl ...

  2. iis部署python运行环境

    IIS部署 1.启用或者关闭windows功能,选择安装CGI,我这里已经安装过了. 2.安装后重新打开IIS看到CGI 3.配置ISAPI和CGI限制 4.右上角添加,路径是python安装路径,注 ...

  3. linux shell数组

    from: http://www.jb51.net/article/34322.htm bash shell只支持一维数组,但参数个数没有限制. 声明一个数组:declare -a array(其实不 ...

  4. JavaScript while 循环

    JavaScript while 循环的目的是为了反复执行语句或代码块. 只要指定条件为 true,循环就可以一直执行代码块. while 循环 while 循环会在指定条件为真时循环执行代码块. 语 ...

  5. 使用Spring实现定时任务

    一．分类 从实现的技术上来分类,目前主要有三种技术(或者说有三种产品): Java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务.使用这种方式可 ...

  6. 这是最好的时光，这是最坏的时光 SNAPSHOT

    好久没动笔了,上次憋了好几天码出的文字扔出去,石沉大海,没惊起半点涟漪.这次真不知道能憋出个什么鬼,索性就让思绪飞扬,飞到哪是哪! --题记 此处应有BGM: 少年锦时 赵雷 1.以后真没有暑假喽 2 ...

  7. 将Gradle项目发布到Jcenter和Maven Central

    Jcenter和Maven Central 为了方便我们理解Android studio是如何帮助我们获取开源库的,我们需要理清几个概念.Apache Maven是Apache开发的一个工具,提供了用 ...

  8. springMVC源码分析--异常处理机制HandlerExceptionResolver执行原理（二）

    上一篇博客springMVC源码分析--异常处理机制HandlerExceptionResolver简单示例(一)中我们简单地实现了一个异常处理实例,接下来我们要介绍一下HandlerExceptio ...

  9. Android Lollipop 5.0 经典新特性回顾

    *Tamic 专注移动开发! 更多文章请关注 http://blog.csdn.net/sk719887916 虽然Android已到了7.0 ,但是我们还是不能忘怀视觉革命性改变的5.0,今天回顾下 ...

  10. Java基础之枚举妙用

    对于枚举,初学Java的时候可能我们就已经接触过了,但是在毕业前,其实一直都不知道真正工作里面枚举是怎么用的,枚举有什么用?接下来,博主就介绍枚举在实际工作中的一种使用场景,本文只适合初级的小菜鸟看哈 ...