示例:
#content{
position:absolute;
width:650px;
height:298px;
left:50%;
top:50%;
margin-left:-325px; /*设置为宽度的一半*/
margin-top:-149px; /*设置为高度的一半*/
}
left: 要设为 50%,此时当前框体，左上角居中了，当然此时要让框体整体居中，要往左移 到宽度一半就居中了
margin-left:-325px; /*设置为宽度的一半*/
margin-top:-149px; /*设置为高度的一半*/
这样就实现了定位居中
分享到：
相关推荐
博文链接：https://kino.iteye.com/blog/205528
如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。 兼容性不错的主流用法是： CSS Code复制内容到剪贴板 .element { width: 600px; height: 400px; position: absolute; left: 50%;...
绝对定位的元素left设为50%时，是已左上角为原点的，所以只要再使用margin属性添加负值补偿回来即可。示例： [css] 复制代码代码如下: #board{ width:60%; padding:3%; background:#09F; position:absolute; top:0...
CSS 将button按钮垂直+水平居中 参考文章：CSS实现垂直居中的5种方法 具体效果如图： 这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0; 。但是因为它有固定高度...
1.css实现居中 缺点：需要提前知道元素的宽度和高度。 <!doctype html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> <style> .box{ width: ...
/*绝对定位*/ top:50%; /*距顶部50%*/ left:50%; margin:-100px 0 0 -150px; /*设定这个div的margin-top的负值为自身的高度的一半,margin-left的值也是自身的宽度的一半的负值.(感觉在绕口令)*/ width:300px; /*宽...
作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼。这段时间，我收集了几种不同的方式制作垂直居中方法，但每种方法各有千秋呀，要...
复制代码代码如下:<...CSS实现div居中</title> <style> /*外层div居中*/ #main { position: absolute; /*极为重要*/ background-color: blue; width:400px; height:200px; left:50%; top:50%;
CSS水平居中 文本水平居中 单个块级元素水平居中 多个水平排列的块级元素 水平居中 多个垂直排列的块级元素 水平居中 CSS垂直居中 单行文本垂直居中 多行文本垂直居中 方法1：使用table布局 方法2：设置vertical-...
PC端有兼容性要求，子元素宽高固定，推荐absolute + 负margin PC端有兼容要求，子元素宽高不固定，推荐absolute + transform PC端无兼容性要求，推荐flex 移动端推荐使用flex 要怎么实现上面这幅图的效果呢，...
而我们通常布局，肯定不会用行内元素，所以会选择，绝对定位或浮动。 2.居中：这里我们应该会想到1/2、50%、一半等这些东西。 上图中：黑色为body，深绿色需要在body中水平居中，并且宽度是自适应的。亮绿色，是...
如果是要垂直居中，也是一样的方法，即设置top:50%,然后margin-top的值为层的高度的一半 position:absolute; left:50%; top:50%; margin-top:-13px; margin-left:-58px; width:116px; height:25px; z-index:999999;
我们在使用css来布局时经常需要进行居中，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，利用css来实现对象的垂直居中有许多不同的方法，比较难的是应该选择哪种正确的方法。比如我们都知道 ...
在面试时，常见的 HTML 和 CSS 问题包括 HTML 元素的分类、CSS 选择器、盒模型、浮动、定位、居中、CSS Hack 等。 HTML 元素分类 根据 HTML 元素的不同特性，可以将其分为行内元素、块级元素和空元素。行内元素...
上下左右都居中的CSS+html写法，position:absolute;top:50%;margin-top:-50px;left:50%;margin-left:-50px;
来设置居中效果时，除去博客下介绍的css3方法外，还可以使用负的margin来居中，这样解决了兼容性的问题，但是只适用于宽高已知的情况（因为负的偏移量为元素宽高的一半）。宽高改变时，不再是居中效果。 在这些布局...
"HTML+CSS总结" ...（1）absolute 用于容器的绝对定位，使用绝对定位的容器浮于其它容器之上。定位的方法是在 CSS 中设置容器的 top、bottom、left 和 right 值，这 4 个值得参照对象是浏览器窗口或父容器。
一、利用 position 和负边距 利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明： 复制代码代码如下: /* 代码实现： * 设定宽度和高度，父...
设置容器的浮动方式为绝对定位然后确定容器的宽高 比如宽500 高 300 的层然后设置层的外边距 CSS Code复制内容到剪贴板 div{ width:500px; height:300px; margin:-150px 0 0 -250px; position:absolute;...
绝对定位使用 absolute 属性，相对定位使用 relative 属性。绝对定位将元素从文档流中删除，而相对定位不会删除元素。 1.5 CSS 如何清除浮动 浮动是 CSS 中的一个布局方式，可以使用 float 属性来实现浮动。但是，...