CODEWITHSUNDEEP
htmlcsssass
Luk
Luk

Reputation: 1149

How to center a container in the middle of a screen

I'm trying to center a text in the middle of my screen. For some reason it doesn't work. Can someone please take a look at the following index.html and explain to me what I am doing wrong?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header {
            display: flex;
            background-color: black;
            padding: 2rem;
        }

        .outer-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100vh;
        }
  
        .inner-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: default;
            justify-content: center;
        }
  
        span {
            padding: .5rem;
        }
    </style>
</head>
<body>
    <div class="parent-container">
        <div class="header">Header</div>
        <div class="outer-container">
            <div class="inner-container">
              <h1>HEADING</h1>
              <span>Some text here.</span>
            </div>
        </div>
    </div>
</body>
</html>

I was thinking that the flex-layout fills all available space. Since my flex-direction is "column", I was expecting the outer container to fill the entire height of my screen, but apparently that's not the case.

Update:

I have now placed my outer-container and the inner-container inside a parent-container to showcase the issue I have when setting the height of the outer-container to 100vh: As you can see, the issue is that a height of 100vh for my outer-container is now too much - the correct height would be 100vh minus the height of the header.

Upvotes: 0

Views: 1188

Answers (3)

Rene van der Lende
Rene van der Lende

Reputation: 5281

The quick and dirty solution is to make the containing parent, body, .outer-container or some .wrapper, fill the full viewport with height: 100% or 100vh, eventually subtract heights of other elements in the same container and use below CSS to center its content.

   display: grid; place-items: center;

snippet

/* Make sure padding/border size are part of element size */
*    { box-sizing: border-box }

body { margin: 0 } /* remove default space, causes overflow */

.parent-container {
    display: flex;
    flex-direction: column;

    height: 100vh; /* would cause overflow with body margin */
}

/* Takes space from .parent-container */
.header {
    display: flex;
    background-color: black;
    padding: 2rem;
}

.outer-container {
    flex: 1; /* Stretch to fill available space */
    display: grid; place-items: center; /* Easy centering demo */
}

.inner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
    justify-content: center;
}

span {
    padding: .5rem;
}
<div class="parent-container">
    <div class="header">Header</div>
    <div class="outer-container">
        <div class="inner-container">
            <h1>HEADING</h1>
            <span>Some text here.</span>
        </div>
    </div>
</div>

Upvotes: 0

Ignas B
Ignas B

Reputation: 51

Your container does not take all screen height and vertical alignment is missing. Here is codepen https://codepen.io/ignasb/pen/KKBQzjQ with vertical and horizontal alignment. I added height and alignment css properties

.outer-container {
  height: 100vh;
  justify-content: center;

  display: flex;
  flex-direction: column;
}

Also you might want additional styles if that scrollbar appears.

body {
  margin: 0;
}

Upvotes: 0

goga goglika
goga goglika

Reputation: 84

add justify-content: center; on both containers

Upvotes: 1

Related Questions