溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“DIV怎么實現圖片水平垂直居中”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“DIV怎么實現圖片水平垂直居中”吧！
第一種：全CSS控制，層漂?。ㄟm用于做登陸頁面）
代碼如下:
<%@ 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控制，不漂?。ㄟm用于做登陸頁面）
代碼如下:
<%@ 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");
//居中高度等于頁面內容高度減去DIV的高度 除以2
var topvalue = (document.body.clientHeight - divname.clientHeight)/2;
divname.style.marginTop = topvalue;
}
//頁面大小發(fā)生變化時觸發(fā)
window.onresize = cen;
</script>
</head>
<body onload=cen()>
<div id = "testdiv" name="testdiv" >
DIV居中演示
</div>
</body>
</html>
第三種：最簡單適用的一種上下左右都居中，兼容所有瀏覽器
代碼如下:
<div ></div>
其他的方法：
純css完美地解決圖片在div內垂直水平居中，兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、Opera、Safari
以下是程序代碼
代碼如下:
<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="https://cache.yisu.com/upload/information/20210311/298/7576.gif"></p>
</div>
</body>
</html>
感謝各位的閱讀，以上就是“DIV怎么實現圖片水平垂直居中”的內容了，經過本文的學習后，相信大家對DIV怎么實現圖片水平垂直居中這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
