What is the best way to use flexbox to occupy the remaining height and align in the center of the screen?

I'm facing a challenge in setting the login container at the center of the screen while occupying the remaining height. It seems that using justify-content aligns the content in the center, but despite setting the container's height to 100%, align-items: center does not work in this scenario.

I've also attempted to set the body's height to 100%, but encountered issues with overflow when resizing the window and some scrolling in fullscreen mode, which is undesirable.

I am currently utilizing tailwindcss for styling, although I have tried replicating the issue in custom CSS without success.

Is there a solution to rectify this? I simply aim to achieve a design similar to the Google login page experience.

html {
  height: 100%;
}

body {
  min-height: 100%;
  overflow-x: hidden;
}
<!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>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="antialiased text-slate-400 bg-slate-900">
  <div class="h-full">
    <!-- Navbar -->
      <nav
        class="w-full flex justify-between items-center px-10 py-4 border-b border-b-slate-700">
        <a href="/" class="relative text-3xl text-slate-200 font-bold tracking-wider" >Navbar</a>
        <ul class="flex gap-5 cursor-pointer">
            <li>
                <a href="/" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100"  >Home</a>
            </li>
            <li>
                <a href="/login" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100">Login</a></li>
        </ul>
    </nav>

      <!-- Login -->
      <div class="h-full flex justify-center items-center">
        <div class="w-[350px] flex flex-col justify-center items-center space-y-10 px-10 py-10 border border-slate-700/50 shadow-lg rounded-lg">
            <h3 class="mb-5 flex justify-center items-center text-2xl font-bold text-sky-500 cursor-default">Login</h3>
            <form class="flex flex-col justify-center gap-3">
                <label for="username" class="font-semibold">Username</label>
                <input
                    type="text"
                    name="username"
                    id="username"
                    class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold"
                    placeholder="Enter your username"
                />
                <label for="password" class="font-semibold">Password</label>
                <input
                    type="password"
                    name="password"
                    id="password"
                    class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold"
                    placeholder="Enter your password"
                />
                <div class="w-full flex flex-col justify-center items-center gap-5 mt-10">>
                    <button class="w-full px-5 py-2 bg-sky-500 rounded-full font-semibold text-white hover:bg-sky-500/80 duration-300">Login</button>
                    <a href="/register" class="w-full px-5 py-2 bg-green-500 rounded-full font-semibold text-white text-center hover:bg-green-500/80 duration-300">Create an account</a > 
                </div>
            </form>
        </div>
    </div>
  </div>
</body>
</html>

htmlcsstailwind-css

Answer №1

Consider the following options:

  • To ensure the immediate child <div> inherits the height, apply height: 100% on the <body> using h-full.
  • For a vertical layout of elements, use 
    display: flex; flex-direction: column
    with flex flex-col on the immediate child <div> of the <body>.

After implementing the above changes, you can either:

Set flex-grow: 1 using grow for the <div> right after the <!-- Login --> comment:

html {
  height: 100%;
}

body {
  overflow-x: hidden;
}
<script src="https://cdn.tailwindcss.com"></script>

<body class="antialiased text-slate-400 bg-slate-900 h-full">
  <div class="h-full flex flex-col">
    <!-- Navbar -->
    <nav class="w-full flex justify-between items-center px-10 py-4 border-b border-b-slate-700">
      <a href="/" class="relative text-3xl text-slate-200 font-bold tracking-wider">Navbar</a>
      <ul class="flex gap-5 cursor-pointer">
        <li>
          <a href="/" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100">Home</a>
        </li>
        <li>
          <a href="/login" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100">Login</a>
        </li>
      </ul>
    </nav>

    <!-- Login -->
    <div class="grow flex justify-center items-center">
      <div class="w-[350px] flex flex-col justify-center items-center space-y-10 px-10 py-10 border border-slate-700/50 shadow-lg rounded-lg">
        <h3 class="mb-5 flex justify-center items-center text-2xl font-bold text-sky-500 cursor-default">Login</h3>
        <form class="flex flex-col justify-center gap-3">
          <label for="username" class="font-semibold">Username</label>
          <input type="text" name="username" id="username" class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold" placeholder="Enter your username" />
          <label for="password" class="font-semibold">Password</label>
          <input type="password" name="password" id="password" class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold" placeholder="Enter your password" />
          <div class="w-full flex flex-col justify-center items-center gap-5 mt-10">
            <button class="w-full px-5 py-2 bg-sky-500 rounded-full font-semibold text-white hover:bg-sky-500/80 duration-300">Login</button>
            <a href="/register" class="w-full px-5 py-2 bg-green-500 rounded-full font-semibold text-white text-center hover:bg-green-500/80 duration-300">Create an account</a >
                </div>
            </form>
        </div>
    </div>
  </div>
</body>

Alternatively, use 

margin-top: auto; margin-bottom: auto
with my-auto on the <div> directly below the <!-- Login --> comment:

html {
  height: 100%;
}

body {
  overflow-x: hidden;
}
<script src="https://cdn.tailwindcss.com"></script>

<body class="antialiased text-slate-400 bg-slate-900 h-full">
  <div class="h-full flex flex-col">
    <!-- Navbar -->
    <nav class="w-full flex justify-between items-center px-10 py-4 border-b border-b-slate-700">
      <a href="/" class="relative text-3xl text-slate-200 font-bold tracking-wider">Navbar</a>
      <ul class="flex gap-5 cursor-pointer">
        <li>
          <a href="/" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100">Home</a>
        </li>
        <li>
          <a href="/login" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100">Login</a>
        </li>
      </ul>
    </nav>

    <!-- Login -->
    <div class="my-auto flex justify-center items-center">
      <div class="w-[350px] flex flex-col justify-center items-center space-y-10 px-10 py-10 border border-slate-700/50 shadow-lg rounded-lg">
        <h3 class="mb-5 flex justify-center items-center text-2xl font-bold text-sky-500 cursor-default">Login</h3>
        <form class="flex flex-col justify-center gap-3">
          <label for="username" class="font-semibold">Username</label>
          <input type="text" name="username" id="username" class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold" placeholder="Enter your username" />
          <label for="password" class="font-semibold">Password</label>
          <input type="password" name="password" id="password" class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold" placeholder="Enter your password" />
          <div class="w-full flex flex-col justify-center items-center gap-5 mt-10">
            <button class="w-full px-5 py-2 bg-sky-500 rounded-full font-semibold text-white hover:bg-sky-500/80 duration-300">Login</button>
            <a href="/register" class="w-full px-5 py-2 bg-green-500 rounded-full font-semibold text-white text-center hover:bg-green-500/80 duration-300">Create an account</a >
                </div>
            </form>
        </div>
    </div>
  </div>
</body>

Answer №2

To utilize all available screen space, set the parent container's height to h-screen instead of h-full, making it take up 100% of the viewport height (100vh). Set a fixed height for the navbar (for example, h-20, which equals 5rem).

Enclose your login form within a div and assign the remaining screen space as its height (100vh - 5rem). Make this div a flex container and apply overflow-y-auto to ensure it displays a scrollbar when necessary due to limited space.

In addition, add the m-auto class to your login div to center the login form both vertically and horizontally.

Check out an example in Tailwind Play.

<div class="h-screen text-slate-400 bg-slate-900">
    <!-- Navbar -->
      <nav
        class="h-20 w-full flex justify-between items-center px-10 py-4 border-b border-b-slate-700">
        <a href="/" class="relative text-3xl text-slate-200 font-bold tracking-wider" >Navbar</a>
        <ul class="flex gap-5 cursor-pointer">
            <li>
                <a href="/" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100"  >Home</a>
            </li>
            <li>
                <a href="/login" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100">Login</a>
            </li>
        </ul>
    </nav>
    <!-- Container with scrollbar: -->
    <div class="h-[calc(100vh-5rem)] overflow-y-auto py-4 flex">
      <!-- Login -->
      <div class="flex justify-center items-center m-auto">
        <div class="w-[350px] flex flex-col justify-center items-center space-y-10 px-10 py-10 border border-slate-700/50 shadow-lg rounded-lg">
            <h3 class="mb-5 flex justify-center items-center text-2xl font-bold text-sky-500 cursor-default">Login</h3>
            <form class="flex flex-col justify-center gap-3">
                <label for="username" class="font-semibold">Username</label>
                <input
                    type="text"
                    name="username"
                    id="username"
                    class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold"
                    placeholder="Enter your username"
                />
                <label for="password" class="font-semibold">Password</label>
                <input
                    type="password"
                    name="password"
                    id="password"
                    class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold"
                    placeholder="Enter your password"
                />
                <div class="w-full flex flex-col justify-center items-center gap-5 mt-10">
                    <button class="w-full px-5 py-2 bg-sky-500 rounded-full font-semibold text-white hover:bg-sky-500/80 duration-300">Login</button>
                    <a href="/register" class="w-full px-5 py-2 bg-green-500 rounded-full font-semibold text-white text-center hover:bg-green-500/80 duration-300">Create an account</a >
                </div>
            </form>
        </div>
    </div>
    </div>
  </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Here's a unique version: "Create a table with a two-layered structure by placing the x-axis data at the top of the table and rotating all text horizontally to be vertical."

My goal is to design my table similar to the screenshot provided in the link below: https://i.sstatic.net/DfcW2.png Currently, my table looks like this: https://i.sstatic.net/DgoHS.png The first column of my table represents issuetype\assignee. Th ...

javascripthtmlcss

Strange spacing issues with inline-block elements and struggling to vertically center content within them

I feel like I'm losing my mind trying to figure this out... any help would be greatly appreciated. There are three divs on the page that need to sit on a single line. They must be square with rounded corners, so setting width and height is necessary ...

htmlcss

What is the best way to display two timers on one page?

I'm having an issue with displaying two timers for a 3-minute countdown. The problem is that the second timer works perfectly, but the first timer doesn't. Even if I remove the second timer, there is still some problem with the first one. The cod ...

javascriptphphtml

Learn how to display only certain elements when triggered by the click of another

I have developed a tab system where each tab contains a unique set of questions and answers. The structure of the tabs is exactly as I envisioned, but I am facing challenges with toggling the display of answers when their respective questions are clicked. ...

javascriptjqueryhtml

Get Your Business Rolling with the Shopify Cruise Theme

I'm currently utilizing the ride theme on my Shopify website and I've embedded a video in an index.json file: "video_url": "https:\/\/www.youtube.com\/watch?v=KlxiEKrhWIQ", Is there a way to make the video aut ...

cssjsonshopify

How come an element retrieved with getElementById in Next.js comes back as null despite the presence of a defined document?

Having trouble using SSR in my React/Next app. Despite having the document present (and being able to visually see the div with the id plTable), the getElementById function is returning null. I even tried calling getElementById after 6 seconds to ensure ...

javascripthtmlreactjsnext.jsserver-side-rendering

Finding the error related to Jquery's .siblings() function has been quite challenging for me

Hello, I need some help troubleshooting my jQuery code. I am attempting to create a hover effect where hovering over one text element will apply CSS to the other two elements. I'm not sure if the issue lies in the $(".yo") or the ('blur') pa ...

jqueryhtmlcss

Showing identification on the drop-down list

Within my dropdown menu setup, I am aiming to achieve a specific functionality. When the user clicks on sub menu, I want the title of sub menu to display in the Menu space as illustrated below. What steps can be taken to accomplish this? UPDATE: After fu ...

jquerycss

The hyperlink is not functional

I'm embedding PHP code within an HTML page and using an href link, but it's not working. Here's the HTML+PHP code snippet: <div class="panel-body"> <div class="row"> <div class="col-md-12 space20"> & ...

javascriptphphtml

What is the best way to utilize toggle("slide") in order to reveal a message letter by letter?

I am currently experimenting with the `.toggle("slide") function to create an effect where a piece of text appears as though each letter is sliding in. However, I've noticed that instead of a smooth slide, it looks more like the text is flying in abru ...

javascriptjqueryhtmlcss

What is the best way to determine which DOM element is clicked when using the OnClick event? Can

Upon clicking an element: I seek to pinpoint the exact element. To prevent selecting multiple elements (e.g. with the same class) (and with or without an id), I am considering retrieving the absolute location/path in the DOM. Strategy: I have devised two ...

javascripthtmldomonclickdom-events

I'm having trouble locating the corresponding end tag for "<%". How can I resolve this issue?

Here lies the issue: <% for(let i = 0; i < <%= elements %>.length; i++){ %> <li><%= elements[i] %></li> <%}%> ...

javascripthtmlexpresstagsejs

What is the best way to incorporate CSS into JavaScript code?

Here is the code I am working with: <script type = "text/javascript"> function pic1() { document.getElementById("img").src = "../images/images/1.png"; } function pic2() { document.getEl ...

javascriptjqueryhtmlcss

Is it possible to create a carousel using a JQuery slideshow that connects the first and last list elements?

I am working on creating a carousel effect with three list elements that should slide in and out of the container when the left or right arrows are clicked. I want the list elements to wrap so that when the last element is reached, it goes back to the firs ...

javascriptjqueryhtmlcss

Using Twitter Bootstrap to set a minimum number of lines for thumbnail captions

I currently have a carousel on my website created using Bootstrap that displays 4 columns of thumbnails. You can view the carousel here. When navigating to the third page of the carousel, you will notice that the container increases in height to accommodat ...

csstwitter-bootstrap

Can you modify the color of the dots within the letters "i"?

Is there a method to generate text like the one shown in the image using only css/html (or any other technique)? The dots in any "i's" should have a distinct color. Ideally, I'd like this to be inserted via a Wordpress WYSIWYG editor (since the ...

jqueryhtmlcss

Excessive number of grid items causing page to exceed capacity with auto-fit feature

I am currently using a grid with an auto-fit feature. Everything is working smoothly, but when the screen size shrinks to less than 350 pixels, it starts to overflow. How can I ensure that it stays at least 350px wide if possible and then shrinks accordi ...

htmlcss

Guide to changing the target of a browser event

I'm facing an issue with my three.js based 3D scene occupying the entire window. Using angular, I implemented an HTML overlay that takes up about 20% width on the right side of the screen. To determine where an event occurs, I referred to something ...

javascripthtmlangularjseventsthree.js

An advanced password checker that notifies the user of any spaces in their password

I need help fixing my JavaScript code. The program should prompt the user for a password using a dialogue box, and then validate that the input has no spaces. If a space is detected, the program should stop and display an alert saying "Invalid, contains a ...

javascripthtmlloopswhile-looppasswords

Using Font Awesome icons instead of markers in Leaflet

Within this code snippet, I initially utilized data[key].category to represent the corresponding icon as a marker. However, my intention is to switch to Font Awesome icons for a more lightweight runtime experience in instances where multiple icons may ne ...

javascriptcssleafletfont-awesome