如何实现DIV中图片左右居中和垂直居中？（已解决）

敦厚的曹操

已于 2022-07-01 14:48:43 修改

阅读量2.5k

点赞数 1

分类专栏： 4.【html】 5.【css】文章标签： html css DIV

于 2021-05-25 11:47:01 首次发布

本文链接：https://blog.csdn.net/dxnn520/article/details/117252805

版权

5.【css】同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

4.【html】

83 篇文章 1 订阅

订阅专栏

第一种：最简单DIV套图

1、DIV ：

上下居中：line-height: 200px;

左右居中：text-align: center;

2、img：vertical-align: middle;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>flex - 弹性盒</title>

</head>
<style>
    .box_1 {
        height: 200px;
        width: 250px;
        background-color: antiquewhite;
        border: 8px red solid;
        box-sizing: content-box;
        margin-left: 20px;
        text-align: center;  /* 左右居中 */
        line-height: 200px;  /* 垂直居中 */

    }

    img {
        width: 130px;
        height: 130px;
        vertical-align: middle; /* 垂直居中 */
    }
</style>

<body>

    <div class="box_1">
        <img src="/images/bank.png" alt="">

    </div>

</body>

</html>

第二种：父DIV - 子DIV - 图片（两个DIV模式）

Html代码：

   <div class="logo">
      <div>
        <img src="images/logo_1.png">
      </div>
    </div>

但是要注意，如果有float:left，将无效。解决办法是：再套一个DIV

 <style>

  .logo {
    height: 60px;
  }

  .logo div {
    width: 80%;
    height: 80%;
    background-color: rgb(245, 196, 169);
    position: relative;
    margin: 0 auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .logo img {
    width: 100%;
    height: 100%;
  }

  </style>