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

实现点： 如果元素的宽高固定,那么,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. python3获取网页天气预报信息并打印

    查到一个可以提供区域天气预报的url, https://www.sojson.com/open/api/weather/json.shtml?city=%E6%88%90%E9%83%BD打算用pyt ...

  2. 实验与作业(Python)-03 Python程序实例解析

    截止日期: 要求: 下周实验课前上交,做好后在实验课上检查可获取平时分. 做出进阶或选做的的请用清晰的标致标识出来,方便老师批改 本次作业:可提交也可不提交.作业算平时成绩. 本次作业内容量较大,请组 ...

  3. 搜索引擎solr和elasticsearch

    刚开始接触搜索引擎,网上收集了一些资料,在这里整理了一下分享给大家. 一.关于搜索引擎 搜索引擎(Search Engine)是指根据一定的策略.运用特定的计算机程序从互联网上搜集信息,在对信息进行组 ...

  4. Linux 中交换空间 （swap）应该分多大才好？

    前一段时间,我们机房中一台Linux服务器运行缓慢,系统服务出现间歇性停止响应,让我过去处理一下这一问题,登录到服务器之后,发现此服务器的物理内存是16G,而最初装机的时候,系统管理人员却只分配了4G ...

  5. Thread Pools

    许多程序会动态创建数十个设置上百个线程.举个例子,一个web服务器可能在每一个新到来的请求时创建一个新线程,然后在请求完成后将其终止. 然而,创建一个新线程将会带来一定的耗费:它需要在内核中创建自身必 ...

  6. activiti uuid主键

    1.1.1.  activiti默认主键生成方式 ; 下面我们看一下主键的生成策略:主键的生成策略定义在IdGenerator接口中,接口定义如下所示: public interface IdGene ...

  7. SpriteKit中为何不要在update方法中测试碰撞

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们若要在游戏中做碰撞检测有2种办法,一是利用物理引擎,二是自 ...

  8. PGM：贝叶斯网表示之朴素贝叶斯模型naive Bayes

    http://blog.csdn.net/pipisorry/article/details/52469064 独立性质的利用 条件参数化和条件独立性假设被结合在一起,目的是对高维概率分布产生非常紧凑 ...

  9. 《高性能MySQL》读书笔记(上)

    <High Performance MySQL>真是本经典好书,从应用层到数据库到硬件平台,各种调优技巧.常见问题全都有所提及.数据库的各种概念技巧平时都有接触,像索引.分区.Shardi ...

  10. Android动态换肤（三、安装主题apk方式）

    相比之前免安装的方式,这种方法需要用户下载并安装皮肤apk,程序写起来比免安装的要简单很多,像很多系统主题就是通过这种方式实现的. 这种方式的思路是,从所有已安装的应用程序中遍历出皮肤程序(根据特定包 ...