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

Posted 2021-05-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;
}

/*
&lt;html&gt;
&lt;body&gt;
   &lt;table id=&quot;wrapper&quot;&gt;
      &lt;tr&gt;
         &lt;td&gt;&lt;img src=&quot;logo.png&quot; alt=&quot;&quot; /&gt;&lt;/td&gt;
      &lt;/tr&gt;
   &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
/*

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

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

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

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

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

如何左对齐和垂直对齐标题中的图像并将文本水平保持在div的中心[重复]

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