CODEWITHSUNDEEP
htmlcss
RhythmInk
RhythmInk

Reputation: 553

Centering full page html content

After a number of hours of trying different styling I am unable to achieve the effect I want.

I have something similar to the following:

<section class="section-container>
<div>
full screen content which I want to centered (equal space above and below) 
and left aligned. 
</div>
</section>
<section class="section-container>
<div>
full screen content which I want to centered (equal space above and below) 
and left aligned. 
</div>
</section>

I have each section taking up 100vh which achieves the full screen effect I want. However, I now want equal spacing above and below which I have been unable to get (it often seems I'm trying to trick css into doing what I want). A couple of things I have tried

.section-container{
height:100vh;
margin-top:50%;
}

.section-container{
height:100vh;
margin: 50% 0;
}
.section-container{
height:100vh;
vertical-align: center;
}

What is it I'm doing wrong/misunderstadning? And is there a general techinque for achieving vertically centered content like this.

Upvotes: 0

Views: 1159

Answers (4)

Mohammed Metwally
Mohammed Metwally

Reputation: 393

I dont clearly understand your question, do you want to vertically center the text content inside the wrapper, i have made a snippet for what i got from you

.section-container{
height:100vh;
margin-bottom:50%;
background: red;
display: flex;
align-items:center;
color: #fff;
}
.section-container:last-of-type{
  margin-bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<section class="section-container">
<div>
full screen content which I want to centered (equal space above and below) 
and left aligned. 
</div>
</section>
<section class="section-container">
<div>
full screen content which I want to centered (equal space above and below) 
and left aligned. 
</div>
</section>
</body>
</html>

Upvotes: 0

ThS
ThS

Reputation: 4783

You can achieve this by using flexbox.

  1. First, you'll make the .section-container elements as flex containers by adding the display: flex rule.
  2. Then, you'll use justify-content: center to distribute same spacing in both right and left.
  3. Lastly, apply align-items: center to distribute same spacing in both top and bottom.

Here's a revised version of your attempt : 

.section-container {
  height: 100vh;
  display: flex; /** the element becomes a flex container that'll make the life much more easier **/
  justify-content: center; /** center horizontally (same spacing left and right) **/
  align-items: center; /** center vertically (same spacing top and bottom) **/
  border: 1px solid red; /** just for the example so the result can be seen **/
}
<section class="section-container">
  <div>
    full screen content which I want to centered (equal space above and below) and left aligned.
  </div>
</section>
<section class="section-container">
  <div>
    full screen content which I want to centered (equal space above and below) and left aligned.
  </div>
</section>

Learn more about flexbox.

Hope I pushed you further.

Upvotes: 0

kiarathedev
kiarathedev

Reputation: 71

Here is a good resource on understanding centering of elements. Most likely the issue comes from using vh or vw. Below is an example that should work with your own work. See that I used px or % instead of vh or vw. 

.section-container{
  width: 500px;
}

div {
   margin: 0 auto; 
}

OR

.section-container{
  width: 100%;
}

div {
  margin-right: 10%; 
  margin-left: 10%; 
}

Upvotes: 0

ldtcoop
ldtcoop

Reputation: 680

There are a lot of ways to do what you want. However, the easiest way to get centered content in modern CSS is probably with Flexbox. To center all of that content, try the following code:

.section-container{
  height:100vh;
  display: flex;
  align-items: center;
}
<section class="section-container">
  <div>
    full screen content which I want to centered (equal space above     and below) and left aligned. 
  </div>
</section>

align-items will center the children of the flexed element vertically, assuming no other flex properties. If you also want to center the content horizontally, add the property justify-content: center.

Upvotes: 3

Related Questions