CODEWITHSUNDEEP
htmlcss
Ben
Ben

Reputation: 305

Align 2 divs side by side vertically centered of the page

I am trying to align two divs vertically centered based on the browsers view height. I'm looking to get these divs side by side too.

I can get both divs side by side, but can't get them down 50% of the vh. When I place them top, left: 50%;, they start there and then continue.

Is it possible to have the 2 vertical center and next to each other?

Here's the JSfiddle link

Or if it is easier, here's the code directly:

CSS:

html {
/*set website minimum resolution*/
 min-width: 1366px;
 min-height: 768px;
 margin:0;
 color:#fff
}
.wrapper{
 /*set div to 100% browser width/height*/ 
 /*width and height fall back*/
 height: 100%;
 width: 100%;
 /*preferable height*/
 height:100vh;
}
.frame-work {
 /*move this div top/middle of screen*/ 
  text-align: center;
  position: absolute;
  top:50%;
  left: 50%;
}
.content {
  /*place inside frame-work side-by-side*/
  width:480px;
  height:300px;
  display: inline-block;
  position: relative;  
  background-color:#000
}

HTML

<div class="wrapper"> <!--100% w/h browser-->
    <div class="frame-work"> <!--container for 2 divs-->
        <div class="content"> <!--left div-->
            Lorem Ipsum Left
        </div>
        <div class="content"> <!--right div-->
            Lorem Ipsum Right
        </div>
    </div>
</div>

Upvotes: 0

Views: 3315

Answers (1)

lalit bhakuni
lalit bhakuni

Reputation: 627

you can use display: flex;align-items: center; it is the best way to align center 

.frame-work {
    text-align: center;
    display: flex;
    width: 100%;
    height: 100vh;
    align-items: center;
}

like : https://jsfiddle.net/wxjd5z9w/9/

Upvotes: 2

Related Questions