在容器中垂直和水平居中放置图像

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在容器中垂直和水平居中放置图像相关的知识，希望对你有一定的参考价值。

Thanks to Brunildo.org for this: http://www.brunildo.org/test/img_center.html
  1. The markup:
  2.  
  3. <div class="wraptocenter"><span></span><img src="..." alt="..."></div>
  4.  
  5. The CSS:
  6.  
  7. <style type="text/css">
  8. .wraptocenter {
  9.     display: table-cell;
  10.     text-align: center;
  11.     vertical-align: middle;
  12.     width: ...;
  13.     height: ...;
  14. }
  15. .wraptocenter * {
  16.     vertical-align: middle;
  17. }
  18. /**//*/
  19. .wraptocenter {
  20.     display: block;
  21. }
  22. .wraptocenter span {
  23.     display: inline-block;
  24.     height: 100%;
  25.     width: 1px;
  26. }
  27. /**/
  28. </style>
  29. <!--[if lt IE 8]><style>
  30. .wraptocenter span {
  31.     display: inline-block;
  32.     height: 100%;
  33. }
  34. </style><![endif]-->

以上是关于在容器中垂直和水平居中放置图像的主要内容，如果未能解决你的问题，请参考以下文章