|
<!DOCTYPE html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<meta
http-equiv="X-UA-Compatible"
content="ie=edge">
<title>水平垂直居中</title>
</head>
<style>
.outBox {
position: relative;
width: 300px;
height: 300px;
background: #ff8300;
border: 1pxsolid
#ff8300;
border-radius:
10px;
margin: auto
}
.innerBox {
position: absolute;
width: 100px;
height: 100px;
background: rgba(0,0,
0, .7);
border: 1pxsolid
#ff8300;
border-radius:
6px;
top: 50%;
left: 50%;
margin-left:
-50px;
margin-top: -50px;
}
</style>
<body>
<div
class="outBox">
<div
class="innerBox">
</div>
</div>
</body>
</html>
外層相對(duì)定位，內(nèi)層絕對(duì)定位。看要居中的物體大小top,left統(tǒng)統(tǒng)50%，然后margin-left,margin-top 負(fù)的物體大小的一半，
比如一個(gè)內(nèi)層100px*100px的，那就是margin-left:-50px;margin-top:-50px
  |
|
|
