绝对中心图像

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了绝对中心图像相关的知识，希望对你有一定的参考价值。

  1. CSS background-image Technique:
  2.  
  3. html {
  4.    width:100%;
  5.    height:100%;
  6.    background:url(logo.png) center center no-repeat;
  7. }
  8.  
  9. CSS + Inline Image Technique:
  10.  
  11. img {
  12.    position: absolute;
  13.    top: 50%;
  14.    left: 50%;
  15.    width: 500px;
  16.    height: 500px;
  17.    margin-top: -250px; /* Half the height */
  18.    margin-left: -250px; /* Half the width */
  19. }
  20.  
  21. Table technique:
  22.  
  23. html, body, #wrapper {
  24.    height:100%;
  25.    width: 100%;
  26.    margin: 0;
  27.    padding: 0;
  28.    border: 0;
  29. }
  30. #wrapper td {
  31.    vertical-align: middle;
  32.    text-align: center;
  33. }
  34.  
  35. <html>
  36. <body>
  37.    <table id="wrapper">
  38.       <tr>
  39.          <td><img src="logo.png" alt="" /></td>
  40.       </tr>
  41.    </table>
  42. </body>
  43. </html>

以上是关于绝对中心图像的主要内容，如果未能解决你的问题，请参考以下文章

CSS 绝对中心（垂直和水平）图像

绝对中心图像

绝对中心图像

CSS 绝对中心（垂直和水平）图像| CSS-技巧

绝对中心（垂直和水平）图像

在不使用绝对位置、顶部和左侧的情况下将按钮置于图像中心的替代方法