Question

我有一个div，并且在div中放置了一张图片。我正在尝试将该div定位在页面的中央，但是无法定位。请帮我。谢谢！

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        .bannerimage {
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="bannerimage">
        <img src="images/mailer2.jpg">
    </div>
</body>

Answer 1

您可以在display: flex类中使用bannerimage，以使其轻松居中。希望这会有所帮助

.bannerimage {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: -webkit-fill-available;
}

Answer 2

img {
     display:block;
     margin:  auto;
    }

<body>
    <div class="bannerimage">
        <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="150px;" height="150px;">
    </div>
</body>

检查此代码。我想这就是您想要的。：）

Answer 3

您已经可以使用display:flex; 但是还有其他方法：

* {
 margin : 0;
 padding : 0;
 }


.bannerimage {
 margin : 0 auto;
 min-width : 20%;
 max-width : 1000px;
 text-align : center;
 backgroud : #000;
 }

我要做的是为.bannerimage提供最小和最大宽度属性，您也可以改用width。

编辑：

正弦，我不知道您图像的分辨率，这是基本示例如何使用margin只是向您展示如何将div自身“居中”。

现在，所有人甚至都没有想到这一点就投下反对票：这是一个小提琴，带有工作代码！天哪！

https://jsfiddle.net/kymd1jv7/

如果您不给此类指定特定的宽度，大多数浏览器会处理此类，因为它将具有100％的宽度。

“图像”也可以以text-align : center;居中

Answer 4

有很多方法，这是https://stackoverflow.com/users/362477/iamnotsam

的补充

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        .bannerimage {
            margin: 0 auto;
            width:100px;

        }
        body{
          height:100%;
        }
        .content {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="bannerimage">
        <img class="content" src="images/mailer2.jpg">
    </div>
</body>

Answer 5

您可以通过使用transform属性来实现。请记住，父div应该为relative

.bannerimage {
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            border:1px solid red
        }

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>
    <div class="bannerimage">
        <img src="images/mailer2.jpg">
    </div>
</body>

Answer 6

添加一个具有设置宽度的容器（宽度：100％或显示：flex）

您可以将margin属性设置为auto以自动将其水平居中   容器中的元素。

该元素将占据指定的宽度，其余的   左右边缘之间将平均分配空间：

https://www.w3schools.com/css/css_margin.asp

 .container{
   display:flex;
 }
 #bannerimage {
   margin: 0 auto;
}

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>
    <div class="container">
        <img src="https://picsum.photos/" id="bannerimage">
    </div>
</body>

无法将我的div放在页面的中央

6 个答案: