先来个纯CSS的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 1500px;
}
.masks {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: black;
opacity: 0.5;
}
.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
display: table;
}
.main {
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
p {
padding: 10px;
background: red;
display: inline-block;
border-radius:10px ;
}
</style>
</head>
<body>
<div class="masks"></div>
<div class="mask">
<div class="main">
<p>hahhaa</p>
</div>
</div>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 1500px;
}
.masks {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: black;
opacity: 0.5;
}
.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
line-height: 100%;
left: 0px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.main {
width: 300px;
height: 300px;
padding: 10px;
background: red;
line-height: 300px;
display: block;
border-radius:10px ;
}
</style>
</head>
<body>
<div class="masks"></div>
<div class="mask">
<div class="main">
<p>hahhaa</p>
</div>
</div>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 1500px;
}
.masks {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: black;
opacity: 0.5;
}
.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
}
.main {
width: 300px;
height: 300px;
padding: 10px;
background: red;
line-height: 300px;
display: block;
border-radius:10px ;
position: absolute;
margin: auto;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div class="masks"></div>
<div class="mask">
<div class="main">
<p>hahhaa</p>
</div>
</div>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 1500px;
}
#zhezhao {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background: red;
opacity: 0.3;
}
.mask {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
.main {
width: 75%;
max-width: 320px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
background: green;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="zhezhao">
</div>
<div class="mask">
<div class="main">
<p>hahhaa</p>
</div>
</div>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
<h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
</body>
</html>
万能的方法就是绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>未知图片宽高居中</title>
<style type="text/css">
.div-1 {
width: 200px;
height: 200px;
border: 1px solid red;
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="div-1">
<img src="img/11111.jpg" />
</div>
</body>
</html>
前提是父DIV能包住图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
background: black;
}
div{
width: 715px;
height: 665px;
border: 1px solid red;
line-height: 667px;
text-align: center;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div><img src="images/3.jpg"/></div>
</body>
</html>
上面的也可以这样实现,前提是父DIV能包住图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
background: black;
}
div{
width: 715px;
height: 665px;
display: table-cell;
border: 1px solid red;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div><img src="images/3.jpg"/></div>
</body>
</html>
上面的也可以这样实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background: black;
}
div {
width: 715px;
height: 665px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
</style>
</head>
<body>
<div><img src="images/3.jpg" /></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.main {
width: 500px;
height: 200px;
background: red;
position: relative;
}
.son {
width: 250px;
position: absolute;
height: 100px;
margin: auto;
top: 0px;
background: blue;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div class="main">
<div class="son"></div>
</div>
</body>
</html>
这样也行哈
<style type="text/css">
.main{
width: 400px;
background: blue;
height: 200px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.java{
width: 300px;
height: 50px;
background: red;
}
</style>
<div class="main">
<div class="java">
</div>
</div>
再来一种
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.div1 {
width: 500px;
height: 200px;
background: red;
position: relative;
}
.div11 {
width: 250px;
height: 100px;
background: green;
transform: translate(125px, 50px);
}
</style>
<div class="div1">
<div class="div11">
</div>
</div>
</body>
</html>