Equal vertical alignment in the center using flexbox

My flexbox layout is set up as shown in the code snippet below:

html {
  height:100%;
  width:100%;
}
body {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  height:100%;
  width:100%;
  margin:0;
  background-color:grey;
}
header {
  background-color:green;
  height:3em;
  flex:0 0 auto;
}
main {
  display:flex;
  flex:1 1 auto;
  overflow:hidden;
  background-color:yellow;
}
nav {
  flex:0 0 100px;
  overflow:auto;
  background-color:grey;
}
#wrapper {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    background-color:red;
}
#content {
      flex: 1 1 auto;
    overflow:auto;
    background-color:white;
}
footer {
      height: 1em;
    flex: 0 0 auto;
    background-color:blue;
}
<header>header</header>
<main>
  <nav></nav>
  <div id="wrapper">
    <div id="content">
     0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>
    </div>
    <footer></footer>
  </div>
</main>

The current scroll behavior displays items from 0 to 29.

If only one line of item 29 is present, how can I horizontally center this single line within the content?

I attempted setting display:flex and align-items:center on content, which worked for a single line but caused the top of the content to disappear with longer content.

Desired outcome for one line:

htmlcssflexboxvertical-alignment

Answer №1

Due to the presence of <br>,, it is not possible to align the items in this way. An alternative approach would be using span for horizontal alignment.

html {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: grey;
}

header {
  background-color: green;
  height: 3em;
  flex: 0 0 auto;
}

main {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  background-color: yellow;
}

nav {
  flex: 0 0 100px;
  overflow: auto;
  background-color: grey;
}

#wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background-color: red;
}

#content {
  align-items: center;
  flex: 1 1 auto;
  overflow: auto;
  background-color: white;
  display: flex;
}

span {
  padding: 5px;
}

footer {
  height: 1em;
  flex: 0 0 auto;
  background-color: blue;
}
<header>header</header>
<main>
  <nav></nav>
  <div id="wrapper">
    <div id="content">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span>10</span>
      <span>11</span>
      <span>12</span>
      <span>13</span>
      <span>14</span>
      <span>15</span>
      <span>16</span>
      <span>17</span>
      <span>18</span>
      <span>19</span>
      <span>20</span>
    </div>
    <footer></footer>
  </div>
</main>

To achieve vertical alignment, consider adding the following CSS properties:

html {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: grey;
}

header {
  background-color: green;
  height: 3em;
  flex: 0 0 auto;
}

main {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  background-color: yellow;
}

nav {
  flex: 0 0 100px;
  overflow: auto;
  background-color: grey;
}

#wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background-color: red;
}

#content {
  flex: 1 1 auto;
  overflow: auto;
  background-color: white;
  display: flex;
  flex-direction: column;
}

span {
  padding: 5px;
}

footer {
  height: 1em;
  flex: 0 0 auto;
  background-color: blue;
}
<header>header</header>
<main>
  <nav></nav>
  <div id="wrapper">
    <div id="content">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span>10</span>
      <span>11</span>
      <span>12</span>
      <span>13</span>
      <span>14</span>
      <span>15</span>
      <span>16</span>
      <span>17</span>
      <span>18</span>
      <span>19</span>
      <span>20</span>
    </div>
    <footer></footer>
  </div>
</main>

To vertically center align your content, you can add this line of CSS: align-items: center;

Answer №2

After reviewing your image, it appears that the solution you're seeking involves using a div instead of a <br>. This will allow for better styling options and organization of content like forms or other data.

html {
  height:100%;
  width:100%;
}
body {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  height:100%;
  width:100%;
  margin:0;
  background-color:grey;
}
header {
  background-color:green;
  height:3em;
  flex:0 0 auto;
}
main {
  display:flex;
  flex:1 1 auto;
  overflow:hidden;
  background-color:yellow;
}
nav {
  flex:0 0 100px;
  overflow:auto;
  background-color:grey;
}
#wrapper {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    background-color:red;
}
#content {
      flex: 1 1 auto;
    overflow:auto;
    background-color:white;
}
#content > div{ border:1px solid #ccc; height:100vh; display:flex; align-items: center;  }
footer {
      height: 1em;
    flex: 0 0 auto;
    background-color:blue;
}
<header>header</header>
<main>
  <nav></nav>
  <div id="wrapper">
    <div id="content">
     <div>0</div>
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
     <div>7</div>
     <div>8</div>
     <div>9</div>
     <div>10</div>
     <div>11</div>
    </div>
    <footer></footer>
  </div>
</main>

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

MaxwidthLG in Material UI design

Hi there, I've encountered an issue with Material UI CSS. Even after attempting to override it, the desired effect is still not achieved. My goal is for the entire div to occupy the full page but this is the current result: https://i.stack.imgur.com/b ...

cssmaterial-uimaterial-design

How do I use CSS to organize data by row and column within a table?

I'm looking to format the table data in a column-row layout for mobile devices. Can anyone provide an example or guidance on how to achieve this? I've browsed through some discussions but haven't found a solution that works with tables. The ...

htmlcss

Can we set $_SESSION equal to $_POST data?

I'm not sure if I'm on the right track, but let's consider this scenario. form.php <?php session_start(); $_SESSION['average'] = $num; echo ' <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <h ...

phphtmlformssessionpost

What are the steps to achieve such a design?

Can you show me how to create a single layout using HTML and CSS? I am struggling with splitting the screen properly. Could you provide a simple example, maybe on jsfiddle? https://i.stack.imgur.com/d2rbn.jpg Thank you in advance! EDIT: I have added a ...

htmlcsslayout

Adjustable height for the absolute element

Having a bit of an issue with the height of the absolute div. About: .wrapper - I want the wrapper to automatically adjust its height but be limited by a max-height. (No scrolling for the wrapper) .title - Just a title .content - The problem aris ...

htmlcss

Is there a peculiar issue with CSS float:right in IE9?

These are the styles I'm using: For the parent container: div.musicContainer { width:820px; height:54px; margin-bottom:20px; } And for the child containers: div.hardcorePlayer { width:400px; float:left; border:n ...

csshtmlinternet-explorer-9

Exploring the world of JQuery Ajax selectors

I am attempting to create a comment system similar to the one found at . I have the AJAX code below, but I am having trouble uniquely selecting text areas for each post. The issue is that the number of posts can vary, so it's important that each post ...

phphtmljquerypost

I am having difficulty combining 2 HTML pages without the output becoming distorted

Having encountered issues when combining two HTML pages, one for a navbar and the other for a contact form in my Django project. The resultant single page appears distorted as shown in the image below. I attempted to use sections but it does not seem to re ...

htmlcssdjango

Elements with fixed positions in CSS overlapping one another

Hey there, I'm working on a navigation bar and using Jquery to resize elements for better website aesthetics. Instead of a traditional horizontal list, each button is created individually with images: <a href="#" class="button" id="home"><im ...

css

Solution for accessing the callee function in JavaScript slide down operation

While exploring a tutorial from CSS Tricks about animating section height, I came across a solution that I would like to implement in my Angular 2 application. Here is the function responsible for expanding sections in my app: expandSection(element) { / ...

javascripthtmlcssangular

Choose specific nodes using the XPath query language

I need help with an HTML snippet: <td> <span class="x-cell">something</span> <span class="y-cell">something</span> <span class="z-cell">something</span> A text <span ...

htmlxpath-1.0

Problem with Flickity's is-selected feature

I am currently exploring Flickity and its functionality. I have a carousel that auto-plays, with the selected cell always placed in the middle and highlighted with a grey background. However, I would like to customize it so that the selected cell is positi ...

htmljquerycssflickity

CSS disappears after selecting menu in JSF application with PrimeFaces

Whenever I click on a p:menuitem and update the content of a layoutunit, the CSS style of the layoutunit disappears. Strangely, when I refresh the page, the style magically reappears. Can anyone explain why this happens? <p:layout id="plantillaPrincipa ...

javacssjsflayoutprimefaces

JavaScript confirmation for PHP delete button

Is there a way to implement a JavaScript alert that prompts the user to confirm their action when they click the delete button? I attempted to integrate a class into an alert box: <?php //$con = mysqli_connect("localhost", "root", "root", "db"); $sql ...

javascriptphphtmlalert

Generate two separate CSS files (Mobile and Desktop versions) by compiling a Stylus (.styl) file using Node.js

Can a single Stylus file be compiled into two separate CSS files? For example, one optimized for mobile without the -moz and webkit elements, and another for cross-browser applications? Thank you. ...

cssnode.jsstylus

What is the best way for me to make my hamburger animation play in reverse?

Having trouble achieving smooth animation effects. I've designed a burger icon using three divs: <div class="container"> <div class="burger-contain"> <div id="line-1" class="line"></div> <div id="line-2" class="lin ...

jqueryhtmlcsscss-animations

Unable to assign focus to textbox

In my chrome extension, I have implemented two text boxes - one for entering a URL and the other for LDAP. Upon clicking on the extension icon, a popup page opens where I automatically fill the URL text box with the current page's URL using the code s ...

javascripthtmlgoogle-chromegoogle-chrome-extension

The onclick handler fails to function following the injection of html using jquery AJAX

After using ajax to inject HTML into my page, the onclick handler on a specific part of that injected HTML does not seem to be functioning... Specifically, I am referring to this image... < img class="close_row" src="img/close.gif"/> In jQuery, I ...

jqueryhtmlajax

Solving the Dilemma of Ordering Table Rows by Value in JavaScript

I am currently working on a table and my goal is to display rows in an orderly manner based on the sum of their columns. Essentially, I want the rows with the highest values to be displayed first, followed by rows with second highest values, and so on. Des ...

javascripthtml

JavaScript for Verifying Phone Numbers

After extensive research and tutorials, I am still unable to figure out what is going wrong with my work. I have a button that looks like this: Despite Stack Overflow causing some trouble for me, please ignore the missing class as it is there. This is no ...

javascripthtmlcss