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

Posted

tags:

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

CSS background-image Technique:

html {
   width:100%;
   height:100%;
   background:url(logo.png) center center no-repeat;
}

CSS + Inline Image Technique:

img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}

Table technique:

html, body, #wrapper {
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#wrapper td {
   vertical-align: middle;
   text-align: center;
}

<html>
<body>
   <table id="wrapper">
      <tr>
         <td><img src="logo.png" alt="" /></td>
      </tr>
   </table>
</body>
</html>

以上是关于CSS 绝对中心（垂直和水平）图像| CSS-技巧的主要内容，如果未能解决你的问题，请参考以下文章

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

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

css 背景绝对中心水平和垂直

CSS 中心可调整图像垂直和水平在一个容器中的悬停和背景

css绝对定位如何水平居中？

带像素偏移的css绝对垂直中心