如何让一个DIV 居中在网页的中心

原创 2017年06月07日 16:38:39
首先需要position:absolute;绝对定位
而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

如:一个层宽度是400,高度是300。       使用绝对定位距离上部与左部都设置成50%。       而margin-top的值为-150。      margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写。


div { position:absolute; top:50%; left:50%; margin:-150px 0 0 -200px; width:400px; height:300px; border:1px solid #008800; }
       <div style="position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -400px; width: 800px;
               height: 600px; border: 1px solid #008800;">
       </div>

如何让DIV和table和网页居中显示

如何让DIV和table和网页居中显示 利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网...

div+css基础——2.网页宽度和居中设置

网页宽度和居中设置 body{ margin:0; padding:0; font-size:12px;

IE和Firefox兼容性:DIV空白-网页居中

又碰到了几个浏览器兼容性问题,这里主要就是说IE和Firefox的差异了; 1. 今天碰到的第一个问题:DIV之间的空白,两个连续的DIV之间,IE没有空白,Firefox则在两个div之间有空白。...

【转】CSS网页布局DIV水平居中的各种方法

来源:百度知道点击打开链接 一、单行垂直居中  如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如:  ...

css让div在整个网页水平、垂直居中解决方法

css让div在整个网页水平、垂直居中解决方法废话不说,直接上最终代码。 .div-out{ position: absolute; left:50%...

使用css3将一个div水平和垂直居中显示

使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】, 代码两个关键点:1.上下左右均0位置定位; ...

CSS中让一个div垂直居中的方法,总结

1.给固定宽高的div垂直居中                显示的结果: 2.给没有固定宽的div垂直居中 通过伪元素和inline-block/verti...

总结:让一个div垂直水平居中

工作中遇到块级元素垂直居中的问题。定宽高的div垂直居中很简单,不定宽高的div垂直水平居中的也总结了几种方法。...
  • dnswek
  • dnswek
  • 2017年05月31日 20:47
  • 158

div中加入span右对齐后出现换行显示两种解决思路(同行显示,一个居中,一个靠右)

就类似说空间里面模块中模块名靠左,编辑字样出现在靠右,一般思路的话一定是认为通过分开两列,一个align=left,另一个align=right。后来我无意中发现有个东西叫,比如实现模块的效果就可以:...
  • wumiju
  • wumiju
  • 2014年04月30日 14:29
  • 4672
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何让一个DIV 居中在网页的中心
举报原因:
原因补充:

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