如何在不增加div的情况下定位图像，使其正好占据div的一半?(html，css)

Question

页面应该是这样的(图片通过下面的链接(，但我遇到了一些问题：在不增加div的情况下，我无法将此图像正好放在div的一半。此外，由于某种原因，我无法从该图片中移动文本(它基本上与她合并(。我已经试过了，但没有成功。提前谢谢。

Html代码：

<div class="parent">
<img src="" alt="parfum">
<p>text</p>

Css代码：

.parent{
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
border: 1px solid blue;
padding: 175px;
border-radius: 5%;

}

img{float：左；

}图片

Answer 1

这最好用flex处理。

#container {
width: 100%; 
height: 100vh;
padding: 0;
margin: 0;
display: flex;  /* use flexbox */
background-color: lightblue;
justify-content: center; /*center x axis */
align-items: center;  /*center y axis  */
}
body,
html {
padding: 0;
margin: 0;
}

<div id='container'>
<img src='https://via.placeholder.com/150'>
</div>