css实现图片在div中居中的方法有哪些

本文为大家介绍了图片在div中居中的四种方法，希望对大家有所帮助。

方法一：

（推荐教程：css视频教程）

html：

  <div class="title">             <div class="flag"></div>             <div class="content">                 <img src="img_p1_title.png">             </div>         </div>

.title {    width: 100%;     font-size: 0;     height: 10%; } .title .content img {     width: 35%; } /*--主要的--*/ .content{     display: inline-block;     vertical-align: middle;   } .flag{     display: inline-block;     vertical-align: middle;     height: 100%;     width: 0;   }

方法二：

  <div class="title">   <img src="img_p1_title.png">

.title {   display: flex;   justify-content: center;   align-items: center; }  .title img {   width: 35%; }//该方法有些旧系统不支持

html

 <div class="title"> <span>第三种方法</span>

.title {    height: 15%;    font-size: 18px;    position: relative; }  .title span {     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, -50%); }

方法四：

html

<div class="title"> <span>第四种方法</span>

 .title {     width: 200px;     height: 200px;     vertical-align: middle;     display: table-cell;     text-align: center; }

相关推荐：CSS教程

以上就是css实现图片在div中居中的方法有哪些的详细内容，更多内容请关注技术你好其它相关文章！