Achieving 100% height in a div container using flex while maintaining vertical centering

Struggling to center text and buttons using flexbox while keeping the columns equal? Setting column height as 100% can be a challenge. If you set the height to 100%, vertical alignment may no longer be centered. Avoid resorting to tables or JavaScript for a solution.

.container {
  display:flex;
  border-top: solid 1px;
  border-bottom: solid 1px;
  align-items: center;
  height:48px;
}
.column {
  flex-basis:100%;
  text-align:center;
}
.mid-col {
  border-left:solid 1px;
  border-right:solid 1px;
}
<div class="container">
  <div class="column">
    <div>50</div>
    <div>Following</div>
  </div>
  <div class="column mid-col">
    <div>50</div>
    <div>Followers</div>
  </div>
  <div class="column">
    <button>Follow</button>
  </div>  
</div>

JS Fiddle: fiddle

htmlcssflexbox

Answer №1

To ensure that the columns within the container have a height of 100%, you should implement nested flexbox by including the following CSS:

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

Add this CSS to the 'column' class and remove the 'align-items: center' from the 'container' class (allowing the default 'align-items: stretch' behavior to take place).

(Currently, setting 100% height for 'column' is not possible due to the 'align-items: center' in your 'container' styling)

Check out the demonstration below:

.container {
  display: flex;
  border-top: solid 1px;
  border-bottom: solid 1px;
  height: 48px;
}
.column {
  flex-basis: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mid-col {
  border-left: solid 1px;
  border-right: solid 1px;
}
<div class="container">
  <div class="column">
    <div>50</div>
    <div>Following</div>
  </div>
  <div class="column mid-col">
    <div>50</div>
    <div>Followers</div>
  </div>
  <div class="column">
    <button>Follow</button>
  </div>
</div>

Answer №2

One way to accomplish this layout without using a table is by utilizing display: table for the parent element and 

display: table-cell; vertical align: middle;
for the child elements. Alternatively, you can achieve the same result using flexbox as shown in the example below.

<!doctype html>
<html>

<head>
    <style>
        .container {
            border-top: solid 1px;
            border-bottom: solid 1px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 300px;
        }
        
        .column {
            text-align: center;
            width: 33%;
        }
        
        .column--top {
            align-self: flex-start;
        }
        
        .column--bottom {
            align-self: flex-end;
        }
        
        .mid-col {
            border-left: solid 1px;
            border-right: solid 1px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="column">
            <div>50</div>
            <div>Following</div>
        </div>
        <div class="column mid-col">
            <div>50</div>
            <div>Followers</div>
        </div>
        <div class="column">
            <button>Follow</button>
        </div>
    </div>

</body>

</html>

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

Can you explain the meaning of the tag "&" ">" "*" in the context of useStyles functions?

After experimenting with React and Material-UI, I came across an interesting pattern in the code. When using the useStyle function, developers often create a class called 'root' and utilize the tag & > *. I tried to research the meaning be ...

cssreactjssassmaterial-ui

Exploring new classes with jQuery's .not() and :not()?

I am working on a memory game where I need to flip cards and check if two are equal. My issue is that I do not want the function to run when clicking on a card that is already flipped, or on another flipped card. I tried using jQuery's .not() and :no ...

javascripthtmljquery

Implementing jQuery function to hide or show content upon page load

Is there a way to have the content hidden when the page is first opened, but then revealed once a button is clicked? Any suggestions? <script> $(document).ready(function(){ $("#rooms").click(function(){ $("#rooms_box").show(); }); $("#faciliti ...

jqueryhtmlshow-hide

Tips on utilizing a local file as a background image URL

How can I modify my CSS to link to a local file path like C:\xampp\htdocs\Folder instead of the URL https://source.unsplash.com/1600x1050/?nature. I am currently using Bootstrap 4 and below is my CSS code: .jumbotron{ background: ...

htmlcssbootstrap-4

Presenting JSON data in a table format on-the-fly even without prior knowledge of the data's structure or field names

When working with my application, I will be receiving data in JSON format and I am looking to showcase this data in a tabular form within a web browser. It's important to mention that I won't know beforehand the structure or field names of the re ...

javascriptjqueryhtmlangularjsjson

Is it possible to align an entire column to the right in the Material UI Data Grid?

I'm currently exploring Material UI and grappling with a specific challenge. Is there a method within Material UI to create a Data Grid with two columns, one left-aligned and the other right-aligned? I've managed to align the headers as desired, ...

javascripthtmlcssreactjsmaterial-ui

Using HTML and JavaScript to automatically update one input date based on changes made to another

Currently, I am developing an Angular application and encountered a challenge with two date input fields: <div class="col-lg-3"> <div> {{ dataInizioLabel }} </div> <input required type="datetime-local" ...

javascripthtmlangular

Acquiring HTML form information in ASP.NET controller

Currently, I have a view that includes an HTML login form and I am working on passing the form values to a controller via post. My goal is to display the user's username using the Content method once the form is submitted. However, I am facing an issu ...

c#htmlasp.netformsasp.net-core-mvc

Aligning a number in the center both vertically and horizontally within a div that is inside a table-cell

Is there a way to center a number both vertically and horizontally within a div that needs to be 60px in width and height, shaped like a circle, and placed in the center of a table-cell? I've managed to center the div within the table-cell but can&apo ...

htmlcss

Ways to manipulate the content of a div

HTML <span class = "Box"> <div class = "active"> <a href ="#-night"> <span class ="list">4</span> <span class="locations"><?php echo $location; ?></span> <span ...

htmlcss

Mobile devices are failing to display the logo as expected

Can anyone help me figure out why the logo is not displaying on mobile devices? I've already tried resetting my phone's network and web browser, as well as reducing the size of the logo from 100px to 80px. Despite these efforts, the logo still wo ...

htmlcss

Resizing an image proportionally using a div container with a child specifying the height dimension

When using a div element on its own, it automatically adjusts its height to fit its contents. I am trying to achieve a layout where a parent div contains two child elements: another div (or left-aligned image) and an unordered list (ul). The inner div (or ...

htmlcsssemantic-markup

The sizing of elements in Firefox seems to be off when using percentage

I am facing an issue with a page that has 3 td elements all set at a width of 33.333333%. In Firefox, the browser seems to be computing it as an actual pixel value of 568px, causing the containers to run off the page. I have not defined any fixed widths in ...

css

Transferring an HTML file to a destination stream

Currently, I'm in the process of constructing a proxy server. One of the tasks I'm tackling involves blocking specific URLs. I have developed a simple HTML page that is supposed to display whenever a blocked URL is requested, but unfortunately, ...

javahtmlproxyserver

Is there a way to refresh a specific element without having to reload the entire page when the button is clicked

While working on a rock, paper, scissors game in JavaScript, I found it tedious to have to constantly reload the page after each play. To solve this issue, I attempted to add a button that would reset the game for a new round. However, I encountered an err ...

javascripthtml

Change the attribute to read-only upon modification of the dropdown value

I have a dropdown menu with four options. My goal is to make the "number" input field readonly if the user selects either "option3" or "option4" from the dropdown. <select id="dropdown"> <option value="option1">option1</option> ...

javascriptjqueryhtml

External Submit button malfunctioning when attempting to submit two distinct forms

I'm currently working on a program to add items to the cart, and I need to include product attributes like colors and sizes in the process. However, I seem to be encountering an issue where only one form is submitted when using jQuery's submit(), ...

javascriptphpjqueryhtmlforms

What is the best way to ensure uniform header height on cards or similar elements using flexbox?

Avoid using hacks Do not hard code the solution. The goal is to create a solution that works for dynamic content and responsive screen sizes, rather than just one specific case. The issue lies in the fact that the headers are not direct children of the e ...

jquerytwitter-bootstrapcssflexbox

How can we transfer parameters in JavaScript?

My vision may be a bit vague, but I'll try to explain it as best as I can. I want to implement multiple buttons that can toggle the visibility of a div (I have this functionality working already). Each button should carry two values (a number and a l ...

javascriptjqueryhtml

Discovering a deeply nested div or class using Beautiful Soup

Recently, I came across this URL: All I want to do is extract the zestimate and include it in a list. The specific class where it's located is: class="Text-c11n-8-65-2__sc-aiai24-0 eUxMDw". I attempted to target it at a higher level in th ...

pythonhtmlpandasbeautifulsoup