CODEWITHSUNDEEP
htmlcssflexbox
eudaimonia
eudaimonia

Reputation: 1536

Flexbox css: how to center 2 images - top / bottom

I try to center to images - one on another.

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

div.out {
  display: flex;
  justify-content: center;
}

div.in {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

div.div1 {
  background-color: violet;
  width: 100%;
  height: 100%;
}

.top {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 999;
}

.bottom {
  width: 200px;
  height: 200px;
  position: absolute;
}
<div class="out div1">
  <div class="in">
    <img class='top' src="./one.jpg" />
    <img class='bottom' src="./background.jpg" />
  </div>
</div>

codepen here: https://codepen.io/anon/pen/MzLRaR

I can't handle with align center both those images like: enter image description here

Any tips or how to handle it best way?

Upvotes: 0

Views: 158

Answers (2)

Chimera.Zen
Chimera.Zen

Reputation: 1160

When you switch from default flex-direction to flex-direction: column the "axis" changes, so justify-content becomes the vertical alignment and align-items becomes the horizontal 

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

div.out {
  display: flex;
  justify-content: center;   /* This centers horizontally */
  align-items: center;       /* This centers vertically */
}

div.in {
  display: flex;
  flex-direction: column;
  justify-content: center;    /* This centers vertically */
  align-items: center;        /* This centers horizontally */
}

div.div1 {
  background-color: violet;
  width: 100%;
  height: 100%;
}

.top {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 999;
}

.bottom {
  width: 200px;
  height: 200px;
  position: absolute;
}
<div class="out div1">
  <div class="in">
    <img class='top' src="./one.jpg" />
    <img class='bottom' src="./background.jpg" />
  </div>
</div>

Upvotes: 1

Fiido93
Fiido93

Reputation: 1978

Here should do the trick. 

html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    div.out {
        display: flex;
        justify-content: center;
    }

    div.in {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    div.div1 {
        background-color: violet;
        width: 100%;
        height: 100%;
      position:relative;
      overflow:hidden;
    }

    .top { 
          position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 19;
    }

DEMO

Upvotes: 0

Related Questions