how to get a floated image to the center - html

Question

so I am basically coding my website.
I made a container, where a text floats to the left and the img to the right. I set a min-width for the text so it gets responsive. The image size is also responsive. Once the screen width gets lower, the image does get under the text but not in the center. I tried using margin: 0 auto; but that didn't help either.
.container {
width: 88%;
margin: auto;
overflow: hidden;
}
/* showcase */
#showcase h1 {
margin: 0;
}
#text {
width: 60%;
float: left;
min-width: 300px;
}
#pic {
width: 40%;
float: right;
}
#pic img {
width: 100%;
}
<section id="showcase">
<div class="container">
<div id="text">
<h1> dummy text </h1> <button class="button_1">Kontakt</button> </div>
<div id="pic"> <img class="mypic" src="./img/menew.png"> </div>
</div>
</section>

Answer 1

Use flex rather than a float on your container, you will get a better response from it
.container {
width: 88%;
overflow: hidden;
display: flex;
}
/* showcase */
#showcase h1 {
margin: 0;
}
#text {
min-width: 300px;
}
#pic {
width: 40%;
}
#pic img {
width: 100%;
}
You can now change the width of your #text div to place where you want the elements
Media query as asked for responsive
#media (max-width: 750px) {
.container {
display: block;
}
}

Answer 2

I deleted #pic float and added auto margin + a min width
#pic{
width: 40%;
min-width: 300px;
margin: 0 auto;
}
and made a media query:
#media (min-width: 600px) {
#pic {
float: right;
}
}