Position div horizontally center but slightly to the left - html

Question

Please see the image below.
Image
I want to center the div horizontally but have it slightly to the left of the page. The problem is that I want the div to center horizontally and vertically when the window is minimized to the phone size.
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 50%;
}
.profile {
width: 480px;
height: 380px;
background-color: lightblue;
}
</style>
<div class="container">
<div class="profile">
<p class="about">Lorem ipsum dolor sit, amet consectetur adipisicing elit. At corporis voluptatibus officiis? Minus architecto voluptatum ea enim eos exercitationem perferendis quae necessitatibus rerum mollitia, atque doloremque obcaecati unde officia soluta?</p>
</div>
</div>

Answer 1

Put this inside .profile
margin: auto;
and the div center horizontally.
But your code is not responsive, because of the fixed width width: 480px; in
.profile
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 50%;
}
.profile {
width: 480px;
height: 380px;
background-color: lightblue;
margin: auto;
}
</style>
<div class="container">
<div class="profile">
<p class="about">Lorem ipsum dolor sit, amet consectetur adipisicing elit. At corporis voluptatibus officiis? Minus architecto voluptatum ea enim eos exercitationem perferendis quae necessitatibus rerum mollitia, atque doloremque obcaecati unde officia soluta?</p>
</div>
</div>
Try this for center the div vertically and horizontally
Run and view the snippet in fullscreen.
But you still have to change the code to your needs.
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 50%;
}
.profile {
width: 480px;
height: 380px;
background-color: lightblue;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div class="container">
<div class="profile">
<p class="about">Lorem ipsum dolor sit, amet consectetur adipisicing elit. At corporis voluptatibus officiis? Minus architecto voluptatum ea enim eos exercitationem perferendis quae necessitatibus rerum mollitia, atque doloremque obcaecati unde officia soluta?</p>
</div>
</div>
Try this for responsive your div on different devices, you don't need the container outside because the position of .profile is absolute, you can place this everywhere(alone) in your html code.
Change the code to your needs.
<style>
.profile {
width: 50%;
height: 50%;
background-color: lightblue;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div class="profile">
<p class="about">CONTENT</p>
</div>
You can make the use of the z-index in css.
The z-index property specifies the stack order of an element.
<style>
.profile {
....
z-index: 100;
....
}
</style>
https://www.w3schools.com/cssref/pr_pos_z-index.asp
UPDATE FOR(I need the div to be positioned to the center-left of the page when viewed on desktop, but when you jump to mobile I want the div to jump to the center of the page)
Try this and fix the min-width for the desktop, too your needs:
#media only screen and (min-width: 1024px)
<style>
.profile {
width: 50%;
height: 50%;
background-color: lightblue;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (min-width: 1024px) {
.profile {
width: 300px;
height: 300px%;
background-color: red;
position: absolute;
left: 10%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
</style>
<div class="profile">
<p class="about">Lorem ipsum dolor sit, amet consectetur adipisicing elit. At corporis voluptatibus officiis? Minus architecto voluptatum ea enim eos exercitationem perferendis quae necessitatibus rerum mollitia, atque doloremque obcaecati unde officia soluta?</p>
</div>