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 >

  <div >

    <p >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>

CodePudding user response：

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 >
  <div >
    <p >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 >
  <div >
    <p >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 >
        <p >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 >
   <p >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>