Question

我有以下HTML：

<div style="width:400px;height:300px;overflow:hidden;">
  <img src="http://d39kbiy71leyho.cloudfront.net/wp-content/uploads/2016/05/09170020/cats-politics-TN.jpg" />
</div>

这是jsfiddle：https://jsfiddle.net/mddc/j2vw29c6/12/

图像宽度为600像素。它不能是背景图像。因此，图像在宽度方向上的中心不会显示在父div的中心（宽度方向）上。请注意，图像无法响应。

谢谢！

Answer 1

满足基本上以一切为中心的命令：）

top: 50%; left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

演示：https://jsfiddle.net/j2vw29c6/14/

Answer 2

您可以在容器上使用flex。

＆＃13;

.container {
  width: 400px;
  height: 300px;
  overflow: hidden;
  display: flex;
  justify-content: center; /* width-direction center */
  align-items: center; /*height-direction center */
}

＆＃13;

<div class="container">
  <img src="http://d39kbiy71leyho.cloudfront.net/wp-content/uploads/2016/05/09170020/cats-politics-TN.jpg" />
</div>

＆＃13;

Answer 3

您可以使用CSS3中引入的flex layout。请参阅下面的CSS

＆＃13;

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

＆＃13;

<div style="width:400px;height:300px;overflow:hidden;" class="flex-container">
  <img src="http://d39kbiy71leyho.cloudfront.net/wp-content/uploads/2016/05/09170020/cats-politics-TN.jpg" />
</div>

＆＃13;

如何在较小的div

3 个答案: