CODEWITHSUNDEEP
htmlcss
Kilvish Shakal
Kilvish Shakal

Reputation: 129

Vertically align a div that is already horizontally centered

I tried to vertically a div that contains a 3 divs using this as a reference. However, I was not able to achieve it using disply: flex and other things mentioned in the reference. The problem is the entire div with id="content" gets only horizontally centered and not vertically centered. I am looking to center it vertically as well. How shall I proceed?

Here is a JSFIDDLE on it.

Here is what I've tried so far.

HTML

<div id="content">
<div class="container">
    <div class="content-wrapper">
        <div class="c-left">
            <video width="400">
              <source src="https://d31vcf9x8qnwak.cloudfront.net/videos/encoded/DuLzrFlrH.mp4" type="video/mp4">
              Your browser does not support HTML5 video.
            </video>
        </div>
        <div class="c-r-top">
            blah blah
        </div>
        <div class="c-r-rest">
            blah blah
        </div>
    </div>
</div>

CSS

.container{
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
overflow: auto;
}
#content{
width: 100%;
}
#content .content-wrapper{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
flex-direction: column;
justify-content: center;
}

Upvotes: 0

Views: 53

Answers (5)

user4979686
user4979686

Reputation:

According to W3: Source: http://www.w3.org/Style/Examples/007/center.en.html About half-way down the page, they suggest using

display:flex;
align-items: center;
justify-content: center;

on a parent container.

Upvotes: 0

Antonio Smoljan
Antonio Smoljan

Reputation: 2207

You can give the #content a set height and make it display:flex with align-items:center

Example

Code:

#content {
    width: 100%;
    height: 1000px;
    display: flex;
    align-items: center;

}

Upvotes: 0

Steve Harris
Steve Harris

Reputation: 5109

Add to your classes:

.container {
    height: 100%;
}
#content {
    height: 100%;
}

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122077

Try this Fiddle

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
}

video {
  border: 1px solid black;
}

Upvotes: 2

Andrew Bone
Andrew Bone

Reputation: 7291

You could do something like this. It's not pretty if the page is too small though so you might want some media queries in there.

.container {
  padding-right: 15px;
  padding-left: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#content .content-wrapper {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  flex-direction: column;
}
<div id="content">
  <div class="container">
    <div class="content-wrapper">
      <div class="c-left">
        <video width="400">
          <source src="https://d31vcf9x8qnwak.cloudfront.net/videos/encoded/DuLzrFlrH.mp4" type="video/mp4"> Your browser does not support HTML5 video.
        </video>
      </div>
      <div class="c-r-top">
        blah blah
      </div>
      <div class="c-r-rest">
        blah blah
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions