img在div中上下居中 大小不固定

可以使用CSS的flex布局来实现img在div中上下居中，大小不固定的效果。具体的实现方式如下：

HTML代码：

<div class="container">
  <img src="your-image-url" alt="your-image-description">
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px; /* 容器高度 */
}

img {
  max-width: 100%; /* 最大宽度，避免超出容器 */
  max-height: 100%; /* 最大高度，避免超出容器 */
}

在上面的代码中，通过将容器的`display`属性设置为`flex`，并分别使用`justify-content`和`align-items`属性来实现水平和垂直的居中。同时，为了避免图片超出容器，我们设置了`img`的`max-width`和`max-height`属性。这样，不论图片的大小是多少，它都会在容器中居中显示，并且不会超出容器。

相关问题

img在div中垂直居中

### 回答1：
可以使用 flex 布局来实现 div 中的 img 垂直居中，具体代码如下：

<div class="container">
  <img src="example.jpg" alt="example">
</div>

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

其中，`justify-content: center` 用于水平居中，`align-items: center` 用于垂直居中。这样就可以实现 img 在 div 中垂直居中了。

### 回答2：
要将`img`垂直居中到`div`中，可以使用以下方法：

方法一：使用flexbox布局

div {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

方法二：使用绝对定位和transform属性

div {
  position: relative;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 往上/左偏移自身50%的宽度和高度 */
}

方法三：使用display属性和vertical-align属性

div {
  display: table-cell;
  vertical-align: middle;
  text-align: center; /* 水平居中 */
}

img {
  display: inline-block;
  vertical-align: middle;
}

无论使用哪种方法，都可以实现将`img`元素垂直居中到`div`中。

### 回答3：
要将img在div中垂直居中，可以通过以下方式实现：

1. 使用Flexbox布局：
在div的样式中，添加display: flex;和align-items: center;的属性。这将使div成为一个Flex容器，并在垂直方向上居中对齐容器中的所有元素。

示例代码如下：

<style>
    .container {
        display: flex;
        align-items: center;
    }
</style>
<div class="container">
    <img src="图片路径" alt="图片描述">
</div>

2. 使用CSS的position和transform属性：
在div的样式中，添加position: relative;的属性，并将img的样式设置为position: absolute;和top: 50%;，然后通过transform: translateY(-50%);将img向上移动50%的高度，实现垂直居中。

示例代码如下：

<style>
    .container {
        position: relative;
        width: 100%;
        height: 300px; /* 设置div的高度 */
    }
    .container img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
</style>
<div class="container">
    <img src="图片路径" alt="图片描述">
</div>

以上两种方法均可实现将img在div中垂直居中的效果。

img在div中 水平居中 无效

要在div中使img水平居中，可以使用以下方法：

首先，确保div拥有一个固定的宽度并且设置了居中的样式属性。可以使用CSS的属性来实现，例如将div的宽度设置为固定的像素或百分比，并使用margin属性来居中它。例如：
div {
width: 500px;
margin: 0 auto;
}

接下来，为img元素添加display:block;属性，以确保它占据整个div的宽度。例如：
img {
display: block;
}

然后，可以使用text-align属性将img元素水平居中。例如：
div {
text-align: center;
}

最后，如果img的宽度超过了div的宽度，可以使用max-width属性将其限制在div内。例如：
img {
max-width: 100%;
}

综上所述，通过设置div的宽度以及水平居中的样式属性，再配合img的display:block;和max-width属性，就能实现在div中的img元素水平居中的效果。