Align Image horizontally and vertically using Flexbox

Question

I want to center the login-img2 vertically and horizontally using flexbox but with this code the image is vertically center but horizontally is not center if i remove flex from grand parent div then its horizontally center but vertically not. I want the minimum flex code to center the image both horizontally and vertically

.login-img-section {
    background-image: url('../images/login-img1.png');
    height: 663px;
    /* max-width: 40%; */
}

.login-img2 {
    align-items: center;
    display: flex;
    justify-content: center;
}

<section>
  <div class="container-fluid login-page-wrapper p0">
    <div class="row">
      <div class="col-lg-6 col-md-12 login-img-section">
        <div class="login-img2">
          <img src="./src/images/login-img2.png" />
        </div>
      </div>
      <div class="col-6"></div>
    </div>
  </div>
</section>

score 0 · Answer 1 · answered Jul 06 '20 at 08:24

you need to set align-items: center; justify-content: center; to the login-img-section

.login-img-section {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 663px;
    /* max-width: 40%; */
}

.login-img2 {
    display: flex;
}

<section>
  <div class="container-fluid login-page-wrapper p0">
    <div class="row">
      <div class="col-lg-6 col-md-12 login-img-section">
        <div class="login-img2">
          <img src="http://pixel.nymag.com/imgs/daily/intelligencer/2014/12/08/08-grumpy-cat.o.jpg/a_190x190.w1200.h630.jpg" />
        </div>
      </div>
      <div class="col-6"></div>
    </div>
  </div>
</section>

if you remove height, it will be centered horizontally, because in this case the height of `login-img-section` will be the height of its child `login-img2`. — Marik Ishtar, Jul 06 '20 at 08:33

score 0 · Answer 2 · answered Jul 06 '20 at 08:28

If you want the image to be centered in the login-img2 class div you need to set the flexbox attributes in another way. See: The login-img2 div is the "flex container" and the img-element is the lonely "flex-item". The css-attributes

.login-img-section {
  display: flex;
  align-items: center;
  justify-content: center;
  ...
}

all belong to the flex-container. This way the flex-items are aligned inside it the way you need it. You can read about flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Align Image horizontally and vertically using Flexbox

2 Answers2