固定宽高的DIV如何绝对居中

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

实现点: 如果元素的宽高固定,那么,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> 

时间: 2025-01-31 09:18:15

固定宽高的DIV如何绝对居中的相关文章

固定宽高且DIV绝对居实现思路及示例

DIV绝对居中且固定宽高在某些情况下还是比较实用的,具体的实现思路及样式如下,喜欢的朋友可以参考下,希望对大家有所帮助   看了一些代码,然后自己试验了一番,分享如下示例: 实现点: 如果元素的宽高固定,那么,css指定样式为top:50%;left:50%; 而margin-top和 margin-left 指定为负数,绝对值为自身宽高的一半 当然,position也需要指定为absolute,或者relative. 如果要在某个父级元素内居中,那么父元素也需要指定CSS的position属性

换行文字、未知宽高图片垂直居中完美解决方案

原文:换行文字.未知宽高图片垂直居中完美解决方案 垂直居中是一个历史悠久的大问题,要做到兼容所有浏览器少不了要花点时间,网上也流传了很多解决方案,但没发现比我现在用的方案更完美,至少在我的项目是如此. 项目中要用到垂直居中而碰到兼容性问题的,一般都是以下几种情况: 1.换行文字垂直居中 2.图片垂直居中 以上都是在固定宽高的容器里垂直居中,不然的话margin,padding便可实现. 解决垂直居中无非就从几个方面入手,利用行高等于容器高度,模拟表格单元格特性,定位,css3的display:b

未知宽高图片垂直居中&amp;amp;&amp;amp;CSS垂直居中总结

http://www.cnblogs.com/dojo-lzz/p/4419596.html DIV    水平垂直居中 <style> #one { width: 500px; height: 300px; background: green; border: 1px solid red; text-align: center; vertical-align: middle; display: table-cell; } #vd { width: 400px; height: 30px; b

把ckeditor上传完图片后宽高固定成100%,在哪里修改,哪位大神帮帮忙?

问题描述 把ckeditor上传完图片后宽高固定成100%,在哪里修改,哪位大神帮帮忙? 解决方案 修改CKEditorpluginsimagedialogsimage.js这个文件,找到下面2句,替换为下面的 C.setValueOf('info''txtWidth'D.$.width)C.setValueOf('info''txtHeight'D.$.height)=======>C.setValueOf('info''txtWidth''100%')C.setValueOf('info''

设置-C# QRCode生成的二维码怎么设定他固定的宽高,不管内容有多少都是这个宽高

问题描述 C# QRCode生成的二维码怎么设定他固定的宽高,不管内容有多少都是这个宽高 C# QRCode生成的二维码怎么设定他固定的宽高,不管内容有多少都是这个宽高 因为打印出来版本号要是0的话就是根据内容来设置二维码大小的. 解决方案 没必要,先生成,然后用graphic.DrawImage绘制缩放后的图像到指定的位置上. 解决方案二: 我试过这个,但是打印出来的大小不是这个设置的. 解决方案三: 为什么老是有一大块在那里的,中间那一小块才是我设置的

html 弹出div实现移动居中

 html 弹出div并移动居中,详细的实现代码如下,感兴趣的朋友不要错过 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示_javascript技巧

下文以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title></title> <sty

javascript获取图片宽高的例子总结

  一.简陋的获取图片方式  代码如下   // 图片地址 后面加时间戳是为了避免缓存     var img_url = '/static/upload/2013/13643608813441.jpg?'+Date.parse(new Date());    // 创建对象     var img = new Image();     // 改变图片的src     img.src = img_url;     // 打印     alert('width:'+img.width+',heig

js获取隐藏元素宽高的方法

网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo