DIV以及圖片水平垂直居中兼容多種瀏覽器
發(fā)布時(shí)間：2013-06-04 15:41:46 作者：佚名 
我要評(píng)論
我要評(píng)論純css完美地解決圖片以及div垂直水平居中，兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、Opera、Safari具體實(shí)現(xiàn)css 如下，感興趣的朋友可以參考下哈
第一種：全CSS控制，層漂浮（適用于做登陸頁(yè)面）
復(fù)制代碼
代碼如下:<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
#divcenter{
position:absolute;/*層漂浮*/
top:50%;
left:50%;
width:300px;
height:300px;
margin-top:-150px;/*注意這里必須是DIV高度的一半*/
margin-left:-150px;/*這里是DIV寬度的一半*/
background:yellow;
border:1px solid red; }
</style>
</head>
<body>
<div id="divcenter"> this is a test </div>
</body>
</html>
第二種：JS + CSS控制，不漂浮（適用于做登陸頁(yè)面）
復(fù)制代碼
代碼如下:<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
function cen(){
var divname = document.all("testdiv");
//居中高度等于頁(yè)面內(nèi)容高度減去DIV的高度 除以2
var topvalue = (document.body.clientHeight - divname.clientHeight)/2;
divname.style.marginTop = topvalue;
}
//頁(yè)面大小發(fā)生變化時(shí)觸發(fā)
window.onresize = cen;
</script>
</head>
<body style="height:100%; width:100%; text-align:center;" onload=cen()>
<div id = "testdiv" name="testdiv" style="margin:0 auto; border:1px solid red; height:400px; width:400px;">
DIV居中演示
</div>
</body>
</html>
第三種：最簡(jiǎn)單適用的一種上下左右都居中，兼容所有瀏覽器
復(fù)制代碼
代碼如下:<div style="position:absolute; top:50%; height:240px;border:1px solid red; margin:0 auto; margin-top:-120px; width:300px; left:50%; margin-left:-150px;"></div>
其他的方法：
純css完美地解決圖片在div內(nèi)垂直水平居中，兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、Opera、Safari
以下是程序代碼
復(fù)制代碼
代碼如下:<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
.img_v {
display:table-cell !important;
display:block;
position:static !important;
position:relative;
overflow:hidden;
width:400px;
height:400px;
border:1px solid #000;
vertical-align:middle;
text-align:center;
}
.img_v p {
display:table-cell !important;
display:block;
margin:0;
position:static !important;
position:absolute;
top:50%;
left:50%;
width:400px;
margin-left:auto;
margin-right:auto;
}
.img_v img {
position:static !important;
position:relative;
top:auto !important;
top:-50%;
left:auto !important;
left:-50%;
}
</style>
</head>
<body>
<div class="img_v">
<p><img src="http://m.fzitv.net/images/logo.gif"></p>
</div>
</body>
</html>
相關(guān)文章
- 這篇文章主要介紹了DIV或者DIV里面的圖片水平與垂直居中的方法,需要的朋友可以參考下2018-11-15
- 下面小編就為大家?guī)?lái)一篇讓DIV水平垂直居中的兩種完美方法推薦。一起跟隨小編過(guò)來(lái)看看吧。希望給大家一個(gè)參考2016-03-15
將一個(gè)絕對(duì)定位的div水平垂直居中對(duì)齊
在某些時(shí)候可能需要將一個(gè)絕對(duì)定位的div在它的父對(duì)象中垂直居中對(duì)齊，可能用到的頻率不是太高，但是偶爾也會(huì)用到，下面就簡(jiǎn)單介紹一下如何實(shí)現(xiàn)此功能2014-01-27使用絕對(duì)定位+負(fù)外邊距讓DIV層水平垂直居中頁(yè)面
在html中水平居中使用margin:0px auto;可以實(shí)現(xiàn)，但垂直居中使用外邊距是無(wú)法達(dá)到效果的，這里使用絕對(duì)定位+負(fù)外邊距的方式來(lái)實(shí)現(xiàn)垂直居中，需要的朋友可以參考下2013-11-13- DIV水平垂直居中css實(shí)現(xiàn)代碼，需要的朋友可以參考下2012-05-27
- 很多情況需要用到div的居中，下面是腳本之家編輯參考一些網(wǎng)站整理的一篇文章。希望對(duì)朋友們有所幫助。2010-07-08
css3 flex實(shí)現(xiàn)div內(nèi)容水平垂直居中的幾種方法
這篇文章主要介紹了css3 flex實(shí)現(xiàn)div內(nèi)容水平垂直居中的幾種方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-03-27