如何让DIV元素永远居中显示
做个变换菜单的DIV居中问题搞了我几个小时,在网上搜到的都不是很理想,终于测试出来一个方法来,这个方法绝对有效,当你真的拿DIV没办法的时候可以试试.
<style type="text/css">
#center {
position:absolute;
width:300px;
height:60px;
left:50%;
top:50%;
z-index:1;
background-color:#000;
color:fff;
margin-left:-150px;
margin-top:-32px
}
</style>
</head>
<body>
<div id="center">绝对在中间</div>
</body>
============以下是网上其他的一些方法,供参考==============
在div+css布局中,居中问题是每个初学者都会碰到的问题:
1.水平居中
举例代码如下:
<!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">
<head>
<title>demo</title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
text-align: center;/*--for IE5.0--*/
}
#layout{
margin: 0 auto;/*--居中 --*/
width: 760px;/*--宽度必须的--*/
text-align: left;
background: #F6F6F6;
}
pre{
padding: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="layout"><pre>
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
text-align: center;/*--for IE5.0--*/
}
#layout{
margin: 0 auto;/*--居中 --*/
width: 760px;/*--宽度必须的--*/
text-align: left;
background: #F6F6F6;
}
pre{
padding: 15px;
}
</pre>
</div>
</body>
</html>
2.另外,经典论坛阿捷的例子:
主要的样式定义如下:
body {TEXT-ALIGN: center;}
#center {
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
}
说明:
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
完整举例代码如下:
<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
}
</style>
</head>
<body>
<div id="center"></div>
</body></html>
3.垂直居中
若BOX的宽度和高度已知:
<!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" >
<head>
<title></title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
}
#layout{
position: absolute;/*--绝对定位--*/
top: 50%;
left: 50%;
margin-top: -240px;/*--div高度的一半--*/
margin-left: -320px;/*--div宽度的一半--*/
width: 640px;
height: 480px;
background: #ECECEC;
}
pre{
padding: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="layout"><pre> body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
}
#layout{
position: absolute;/*--绝对定位--*/
top: 50%;
left: 50%;
margin-top: -240px;/*--div高度的一半--*/
margin-left: -320px;/*--div宽度的一半--*/
width: 640px;
height: 480px;
background: #ECECEC;
}
pre{
padding: 15px;
}
</pre></div>
</body>
</html>
解释:如果把屏幕中点设为坐标原点(0 0),X的正方向是屏幕的右边,Y的正方向屏幕的上边。那么在已知BOX宽度和高度的情况下,设BOX的属性为绝对定位,top:50% left:50%,这样的话,BOX的左上角就在坐标原点(0 0), 设margin-left:-320px(宽度的一半), 左上角的坐标(-320 0),再设margin-top:-240px(高度的一半),左上角的坐标现在是(-320 240),相对原点来说, BOX是完全居中了,四个顶点的值分比别是(320 240)Ⅰ, (-320 240)Ⅱ,(-320 -240)Ⅲ ,(320 -240)Ⅳ。
适用于首页带语言选择版本或者欢迎页。
单行文字可采用行高来实现垂直居中,或者用padding来调整。
4.另一个方法:
<div style="border: 1 solid red;position: absolute;top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);">我站在中央了<br>center</div>
</div>
<div style="border: 1 solid #C0C0C0;"><br><br><br><br><br><br><br><br>
<div style="border: 1 solid red;position: absolute;top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);">我站在中央了<br>center</div>
如何让DIV元素永远居中显示相关推荐
- html div背景自动居中显示,网站背景图居中自适应以及拉伸填充CSS代码解决方法...
写这篇水文呢,也是最近在自己在魔改一个主题用作新做的班级网站. 发现模版的背景图片以及其他地方的图片显示只能在电脑端看到,而在移动端不能够自适应.顺便也整理出来. 首先是图片的居中自适应: 需要先给C ...
- 浮动元素横排居中显示及浏览器兼容性处理
经常会遇到这样的页面布局:在一排显示几个不同的区域内容,但它们相对于页面是居中对齐的.注意这些区域内容不只是文字,也许还有图片或者其它元素混合而成.一般这样的布局我们很容易想到要用浮动float,但是 ...
- html中div设置图片居中显示,图片在DIV中居中显示的方法
问:如何让图片在DIV中水平和垂直两个方向都居中?(注意这里的图片非用作背景) 关于该问题的解决方法如下: 方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的 ...
- css 宽高自适应的div 元素 如何居中 垂直居中
在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法 上代码 下面的是 结构代码 <div class=" ...
- CSS实现div的嵌套居中显示的多种方式
1.通过flex方式实现:将父盒子的position属性设置为relative,并且display设置为flex,最后设置水平居中和垂直居中.这样设置后,子盒子不需要设置什么,就会实现居中.哪个盒子需 ...
- css中表居中,CSS DIV中表格居中显示
使用css3的动画模拟太阳系行星公转 本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最 ...
- 让DIV中的DIV居中显示
最近项目上的问题大部分都是前端页面的问题,所以我自然就跑去修改前端代码了, 发现前端div中的div不是居中显示的,网上说将父级DIV设置为text-align:center 子级设置为margin: ...
- 使用css代码实现div居中显示 div水平居中显示
使用css代码实现div居中显示 div水平居中显示 属性 居中显示 属性 需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为**margin:0 auto: ...
- 手机端扣扣浏览器图片居中_实现图片始终居中显示于浏览器窗口中心位置
盒模型 在敲代码之前,首先建立一个盒模型,这让写代码的时候变得思路清晰. 本案例中,所要实现的是图片居中显示,超出浏览器窗口部分的图片隐藏.因此,盒模型如图: 图片以浏览器窗口作为定位元素,居中显示. ...
最新文章
- centos7离线安装ansible
- 面试准备——Struts2相关问题
- java 计算器类图_多态计算器(封装、继承、多态、简单工厂)
- 互联网日报 | 字节跳动否认进军社区团购;中兴手机回归国内2C市场;华为公布5G商用一年成绩单...
- Ubuntu 16.04 下修改免安裝版tomcat的內存大小
- java分库校验商户流水号是否重复,asp中用数据库生成不重复的流水号
- 你的 AI 程序无人问津?不是不够好,而是缺一个展示的舞台
- c程序语言编写 计算器,C语言编写简单计算器
- NSArray的排序问题
- Android 显式意图(Intent) 与 隐式意图
- Atiitt 流水线停顿问题与解决方法 1. 流水线技术方式分类	1 2. 但在实际中,会出现2种情况使流水线停顿下来或不能启动:	2 2.1. 1、多个任务在同一时间周期内争用同一个流水段	2 2
- 烟台联通云服务器项目,山东烟台联通dns服务器地址
- h5 神策埋点_神策埋点思路
- 政府部门服务器拒收邮件 怎么办,hotmail 邮箱最近反映拒收邮件,请问怎么解决?...
- (一)来自 192.168.xx.xx的回复: TTL 传输中过期。
- matlab实现通信系统,香农定理的介绍
- 电脑屏幕亮度怎么调节?台式电脑找不到屏幕亮度怎么办
- 没有什么秘密的学习方法
- 申报不能忘,2022年湖北省各地专精特新小巨人企业奖励补贴政策汇编(附申报条件)
- DTC社群运营怎么做?