Question

我有一个类为outter的div，其固定大小为100px x 100px。

然后在此div中是图像。此图片的大小可以小于或等于100px x 100px。如何在此div内垂直和水平居中放置此图像。

.outter {
    margin: 0 auto;
    height: 100px;
    width: 100px;
    background: blue;
}

.outter img {
    width: auto;
    height: auto;
    margin: auto;
    background: red;
}

<div class="outter">
    <img src="https://i.imgur.com/X3KSZnQ.png">
</div>

Answer 1

使用flex：

.outter {
    height: 100px;
    width: 100px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content: center;
}

.outter img {
    width: auto;
    height: auto;
    margin: auto;
    background: red;
}

<div class="outter">
    <img src="https://i.imgur.com/X3KSZnQ.png">
</div>

Answer 2

尝试使用flexbox简单的方法：

.outter {
    margin: 0 auto;
    height: 100px;
    width: 100px;
    background: blue;
    display: flex;
    align-items: center;
}

.outter img {
    width: auto;
    height: auto;
    margin: auto;
    background: red;
}

<div class="outter">
    <img src="https://i.imgur.com/X3KSZnQ.png">
</div>

Answer 3

您可以对孩子执行以下操作：

.outter img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.outter {
    margin: 0 auto;
    height: 100px;
    width: 100px;
    background: blue;
}

那么简单

Answer 4

您可以使用display: flex; CSS属性轻松完成此操作。只需在其父级上添加display：flex。

.outter {
    margin: 0 auto;
    height: 100px;
    width: 100px;
    background: blue;


    display: flex; // use this
}

.outter img {
    width: auto;
    height: auto;
    margin: auto;
    background: red;
}

如何在div中垂直和水平居中放置图像

4 个答案: