如何在图片中居中放置div？(使用flex，但不使用背景-img)

在图片中居中放置div可以使用flex布局来实现，而不使用背景图片。以下是步骤：

首先，确保父容器设置了display: flex属性，将其设置为flex布局。
确定图片和div元素的父容器，并设置其为flex布局。
在图片和div元素的父容器上设置justify-content: center和align-items: center属性，使其在水平和垂直方向上居中。
在图片和div元素的父容器上设置position: relative属性，以便在需要时进行定位。
在div元素上设置position: absolute属性，以使其脱离文档流。
设置div元素的left: 50%和top: 50%属性，将其位置移动到父容器的中心。
使用transform属性将div元素的位置偏移自身宽度和高度的一半，即transform: translate(-50%, -50%)。

以下是示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .image {
            position: relative;
        }

        .centered-div {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            /* 其他样式属性 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="image">
            <img src="your-image.jpg" alt="Image">
            <div class="centered-div">
                <!-- 居中放置的内容 -->
            </div>
        </div>
    </div>
</body>
</html>

此方法利用了flex布局和绝对定位，将div元素相对于父容器进行定位，实现在图片中居中放置div的效果。