HTML/CSS

图片垂直水平居中CSS实现方法

创客主机

在前端开发制作中,图片垂直居中对齐是很常见的,有些是固定高度,有些没有固定高度,分享几种使用CSS实现图片垂直&&水平居中的方法,有些可能并不能兼容所有浏览器,大家可以自行选择:

方法一:

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

方法二:

  1.     img {
  2.        position: absolute;
  3.        top: 50%;
  4.        left: 50%;
  5.        width: 500px; /*图片宽度*/
  6.        height: 500px; /*图片高度*/
  7.        margin-top: -250px; /* 高度的一半 */
  8.        margin-left: -250px; /* 宽度的一半 */
  9.     }

方法三:

  1.     html, body, #wrapper {
  2.        height:100%;
  3.        width: 100%;
  4.        margin: 0;
  5.        padding: 0;
  6.        border: 0;
  7.     }
  8.     #wrapper td {
  9.        vertical-align: middle;
  10.        text-align: center;
  11.     }
  1.     <html>
  2.     <body>
  3.        <table id="wrapper">
  4.           <tr>
  5.              <td><img src="logo.png" alt="" /></td>
  6.           </tr>
  7.        </table>
  8.     </body>
  9.     </html>

方法四:

Flex 技术实现

  1.     .container{
  2.         width: 1000px;
  3.         height: 800px;
  4.         border: 1px solid #ccc;
  5.         margin: 0 auto;
  6.     }
  7.     div.horizontal {
  8.         height: 100%;
  9.         display: flex;
  10.         // justify-content: center;
  11.     }
  12.  
  13.     div.vertical {
  14.         display: flex;
  15.         flex-direction: column;
  16.         justify-content: center;
  17.     }
  1.     <div class="container">
  2.         <div class="horizontal div1">
  3.             <div class="vertical">
  4.                 <img src="logo.png" />
  5.             </div>
  6.         </div>
  7.     </div>
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!