CSS property margin: 0 auto for image not working

Question

Here is a small code in which I have divided the screen in two containers (box1 and box2) with flex property on the parent container. In box2, I have put an image which I want to put it in the centre of its containing box. Here is the code below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container{
      display: flex;
      padding: 5%;
      background-color: aqua;
    }
    .box1{
      padding: 100px;
      /* border: 2px solid black; */
      flex: 1 1 100%;
    }
    .box2{
      /* padding: 100px; */
      /* border: 2px solid black; */
      flex: 1 1 100%;
    }
    img{
      /* width: 225px; */
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1">
      <h1>Welcome to NY</h1>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi quae nulla mollitia natus debitis facilis ducimus. Fuga cum quasi reprehenderit, voluptatem saepe quam ipsa odio nostrum inventore ut sequi quo?</p>
    </div>
    <div class="box2">
      
        <img src="https://media.wired.com/photos/5d09594a62bcb0c9752779d9/1:1/w_1500,h_1500,c_limit/Transpo_G70_TA-518126.jpg" height=200px width=200px alt="">
      
      
    </div>
  </div>
</body>
</html>

The size of my screen is 1271 px.

What else can I do to centre the image in box2 div?

score 2 · Answer 1 · answered Jun 22 '22 at 07:23

Just use flex property in your box 2. Add align-items:center; and display:flex; to center vertically.

If you want also horizontally center the image, just add justify-content:center; to your box.

.container{
      display: flex;
      padding: 5%;
      background-color: aqua;
    }
    .box1{
      padding: 100px;
      /* border: 2px solid black; */
      flex: 1 1 100%;
    }
    .box2{
      /* padding: 100px; */
      /* border: 2px solid black; */
      flex: 1 1 100%;
      display:flex;
      align-items:center;
    }
    img{
      
      /* width: 225px; */
      margin: 0 auto;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <div class="container">
    <div class="box1">
      <h1>Welcome to NY</h1>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi quae nulla mollitia natus debitis facilis ducimus. Fuga cum quasi reprehenderit, voluptatem saepe quam ipsa odio nostrum inventore ut sequi quo?</p>
    </div>
    <div class="box2">
      
        <img src="https://media.wired.com/photos/5d09594a62bcb0c9752779d9/1:1/w_1500,h_1500,c_limit/Transpo_G70_TA-518126.jpg" height=200px width=200px alt="">
      
      
    </div>
  </div>
</body>
</html>

So can i remove the style from img element? Will it still place the image at centre? — Anjali Mittal, Jun 22 '22 at 07:35

score 0 · Answer 2 · answered Jun 22 '22 at 07:40

When a element in flex container this will layout by flex container, in this layout context margin: 0 auto will padding center the last space as you can see. The only way to remove flex effect is out of flex flow: position: absolute in your situation. general center a absolut element we also set left: 0; right: 0

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container{
      display: flex;
      padding: 5%;
      background-color: aqua;
    }
    .box1{
      padding: 100px;
      /* border: 2px solid black; */
      flex: 1 1 100%;
    }
    .box2{
      /* padding: 100px; */
      /* border: 2px solid black; */
      flex: 1 1 100%;
    }
    img{
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1">
      <h1>Welcome to NY</h1>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi quae nulla mollitia natus debitis facilis ducimus. Fuga cum quasi reprehenderit, voluptatem saepe quam ipsa odio nostrum inventore ut sequi quo?</p>
    </div>
    <div class="box2">
      
        <img src="https://media.wired.com/photos/5d09594a62bcb0c9752779d9/1:1/w_1500,h_1500,c_limit/Transpo_G70_TA-518126.jpg" height=200px width=200px alt="">
      
      
    </div>
  </div>
</body>
</html>

Using position absolute to center an element is not a good solution — Sfili_81, Jun 22 '22 at 07:48
Sure. but the question confuse margin auto why is not working. Otherwise mostly flex align-items and justify-contents is used. — quanwei li, Jun 22 '22 at 09:00

CSS property margin: 0 auto for image not working

2 Answers2