body结构
- 1
- 2
- 3
- 4
- 5
方法一:
将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
方法二:
1、div设relative,
2、将img设absolute,left:50%,top:50%
3、将图片向上移动图片高度的一半,并向左移动图片宽度的一半。
<style type="text/css"> .box{ width: 99px; height: 102px; position: relative; border:1px solid #000; } img { width: 90px; height: 90px; position: absolute; top: 50%; left: 50%; margin-left: -45px; /* 宽度的一半 */ margin-top: -45px; /* 高度的一半 */ } </style> </head> <body> <div class="box"> <img src="images/c3.png" alt="图片"/> </div> </body>