-1

I want to center 3 divs horizontally and vertically in a div. I can't use flexbox, because later more divs and flexbox is shinks these new divs, but I dont know how to center vertically

<div class="hero">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.hero {
  width: 100vw;
  height: 100vh; 
  text-align: center;
}

.box {
    width: 250px;
    height: 350px;
    background: red;
    margin: 50px;
    display: inline-block;
}
Natixco
  • 1
  • 6
  • Wait. Elaborate more on why flexbox won't work? I'm based on your explanation of sounds like there are just some features of flexbox you're not familiar with. And it certainly sounds like this is a flexbox use case. – Aaron Pool May 06 '18 at 20:49
  • Yes, I use flexbox, but if I put plus 3 more div, flex is shrinks the divs. – Natixco May 06 '18 at 20:53
  • you can't use flexbox simply because you don't know how ... this is not a reason to not use it, as you will probably learn something new or how to deal with your issue – Temani Afif May 06 '18 at 21:05
  • Yeah, if you can either set flex to 'none' if you want the divs to have a fixed size, or if you just don't want them to shrink after they get their size, then read up on the "flex-shrink" attribute. Flexbox is definitely the "right" way to handle this. – Aaron Pool May 06 '18 at 21:09

2 Answers2

0

It's still possible to center it by nudging it up half of it's height after bumping it down halfway:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Update : ( H in Priority ) :

html, body {
    height: 100%;
}
.hero {
    text-align: center;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.box {
    width: 250px;
    height: 350px;
    background: red;
    margin: 5px;
    top: 50%;
    position: relative;
    display: inline-block;
}
Arash Hatami
  • 5,297
  • 5
  • 39
  • 59
0

html,body,div,table-cell{
width:100%;
padding:0;
border:0;
}

.hero {
  width: 100vw;
  height: 100vh;        
    display:table-cell;
    vertical-align:middle;
}

#a{
margin:0 auto;
display:block;
width:750px;
}

.box {
    width: 250px;
    height: 50vh;
    background: red; 
    display:inline-block;
    box-sizing:border-box;
    border:3px solid black;
     
    
    
    
    
   }
<div class="hero">
  <div id='a'>
     <div class="box"></div
     ><div class="box"></div
     ><div class="box"></div>
 </div>
</div>
DCR
  • 14,737
  • 12
  • 52
  • 115