Question

如何将图像居中以使其位于DIV的完整中心？

#box
{
border: 1px solid;
margin: 0px 10px 0px 0px;
width: 250px;
height: 200px;
border-radius: 35px; 
-webkit-border-radius: 35px; 
-moz-border-radius: 35px; 
border: 1px solid #E8E8E8;
display:inline-block;
}

<div id="box">
<img src="cleaning1.jpg" height="150px" width="200px">
</div>

Answer 1

您可以将图片的默认显示类型更改为inline-block，并在inline-block旁边创建一个全高度伪元素。

然后通过vertical-align: middle;垂直对齐内联元素，并使用text-align: center;为父#box将图像移到中心。

此外，您必须删除内联（块）元素之间的空格字符。你可以参考my answer来做到这一点。

你走了：

#box {
    /* Other styles here... */

    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

#box:after {         /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#box img {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */  
}

<强> WORKING DEMO

有关详细信息，请参阅 my answer here 。

Answer 2

使用flexbox！

<div id="box" style = 'display:flex'>
    <div style = 'margin:auto'>
       <img src="cleaning1.jpg" height="150px" width="200px">
    </div>
</div>

注意：我将图像包装在div中而不是简单地给图像赋予样式属性margin:auto，因为在某些情况下我注意到图像宽度/高度参数不受其他方面的尊重。

在DIV中居中图像Y和X.

2 个答案: