Looking for a way to vertically center items using CSS Flexbox and struggling to get it right. My attempts so far have been unsuccessful

After using margin: auto to center my flexbox horizontally on the webpage, I am struggling to vertically center it as well.
As a CSS beginner, I would appreciate any help. Thank you.

.container {
    background-image: url(paperbackground.jpg);
    color: #D64933;
    margin: auto;
    width: 500px;
}

.box {
    align-content: center;
    display:flex;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight:bold;
    justify-content: center;
    padding: 2px;
}
    <div class="container">
        <ul>
            <!--Below is an unordered list.-->
            <div class="box"><li>Video Games</li></div>
            <div class="box"><li>Watching technology, hacking and other documentaries.</li></div>
            <div class="box"><li>Chess</li></div>
            <div class="box"><li>Cricket</li></div>
        </ul>
    </div>

htmlcss

Answer №1

To achieve the same effect, you can utilize a flexbox for the container. Check it out here

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      .container {
        color: #d64933;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .box {
        text-align: center;
        display: flex;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 25px;
        font-weight: bold;
        justify-content: center;
        padding: 2px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <ul>
        <!--Below is an unordered list.-->
        <div class="box"><li>Video Games</li></div>
        <div class="box">
          <li>Watching technology, hacking and other documentaries.</li>
        </div>
        <div class="box"><li>Chess</li></div>
        <div class="box"><li>Cricket</li></div>
      </ul>
    </div>
  </body>
</html>

Answer №2

https://i.sstatic.net/X8cZe.png

body {
  /* setting the height to the device height */
  height: 100vh;
  /* solving the bug about scrollbar */
  margin: 0;
  /* using margin auto, basically you don't need to write align-items: center; in body it will automatically work */
  /* so just use flexbox and it will work fine */
  display: flex;
}

.container {
  background-image: url(texturebackground.jpg);
  color: #f70d16;
  margin: auto;
  /* for deleting the wrapping thing don't use this 700px line below */
  width: 700px;
}

.box {
  align-content: center;
  display: flex;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 20px;
  font-weight: normal;
  justify-content: center;
  padding: 4px;
}
<body>
  <div class="container">
    <ul>
      <!--Below is an unordered list.-->
      <!-- 1 -->
      <div class="box">
        <li>Reading Books</li>
      </div>
      <!-- 2 -->
      <div class="box">
        <li>Exploring Nature</li>
      </div>
      <!-- 3 -->
      <div class="box">
        <li>Listening to Music</li>
      </div>
      <!-- 4 -->
      <div class="box">
        <li>Running marathons</li>
      </div>
    </ul>
  </div>
</body>

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

Ways to stop bootstrap from taking over the current styles in your application

Utilizing ng-bootstrap in my angular-app to create a popover, resembling something like https://i.sstatic.net/RPU49.png. I have incorporated custom fonts in the body which are specified in the styles.scss file as: $r-typography: mat-typography-config( $f ...

cssangularbootstrap-4sassng-bootstrap

Enhance your Zara shopping experience with the dynamic image zoom-in

I am currently exploring ways to replicate the image zoom-in feature seen on Zara's product pages. To see this effect in action, visit their site: Upon clicking on the image, it opens up in a popup window where it is enlarged to fit the entire screen ...

jquerycssimageweblightbox

A helpful tip for disabling by overriding webkit-transform without removing the line

I needed to make some changes to a css file but didn't want to alter it directly for personal reasons. Instead, I created a new css file where I overrode the specific lines that needed changing. However, now I'm wondering how I can cancel out thi ...

css

Strange behaviors when using setinterval with classes

Currently working on enhancing a slider functionality, and I have observed that everything is functioning smoothly - function Slider(element) { this.i = 0; this.element = element; var self = this; this.timer = window.setInterval(functi ...

javascriptjquerycssoopvelocity.js

Ensure that the child div within the parent div occupies the entire width, even when the sidebar is hidden

Is there a way to make a child div take up 100% of its parent div's width? I'm trying to create a layout with a sidebar and I want the main content area to fill up the remaining space by adjusting its width based on the sidebar .bodySection { ...

htmlcss

Focusing solely on a particular category in EJS

I am struggling with this code snippet. HTML: <header<% if ( current.source === 'features' || current.path[0] === 'index' || current.source !== 'customers' ) { %> class="header-white"<% } %>> <div cl ...

javascriptcssejsharp

Using a DIV to contain a FileUpload Control in an ASPX page

Scenario: I have an ASPX page (Page A) without a form element, which contains a DIV displaying another ASPX page (Page B) with a FileUpload Control inside a form element. Requirement: Submit the form to upload the file without refreshing or navigating awa ...

htmlasp.net

AngularJS fails to disable submit button despite 'Required' validation being implemented

I have an issue with my form where it still submits even if required fields are left empty. In Chrome, it shows a message to fill out text inputs but not dropdowns, and still proceeds to submit the form. Am I overlooking something obvious here? ...

angularjshtml

Is it possible to trim a video using HTML code?

I am trying to find a way to crop a video using HTML 5. <video id="glass" width="640" height="360" autoplay> <source src="invisible-glass-fill.mp4" type="video/mp4"> </video> Currently, the video has a resolution of 640x360. However ...

javascriptjqueryhtmlhtml5-video

Partial View Not Displaying in IONIC App

Struggling to navigate to a partial view from the main view in Ionic, despite following all the rules. Here's my code: The index.html: <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> & ...

javascripthtmlionic-framework

Is having async as false really detrimental?

Splitting my inquiry into two sections. Within my website, I am dynamically generating some divs by utilizing ajax post requests to retrieve data from the database. Following is the structure of my setup. <html> <body> <script type=" ...

javascriptjqueryhtmlajax

I am looking to incorporate a checkbox next to every row in a table using HTML

Is there a way to include a checkbox next to each row in the table using HTML? How would I go about adding it with the following code: <td> &nbsp; </td> <td> &nbsp; </td> ...

htmlcheckboxhtml-tablerow

What is the best way to choose an element within an <iframe> that is wrapped in an <HTML> tag using a jQuery selector?

My webpage has an unusual structure with HTML tags nested inside of one another, making it difficult to select specific elements using jQuery. It seems that jQuery is unable to traverse across multiple HTML tags? Here is an example: <HTML> < ...

javascriptjqueryhtmldomselector

Essential components to include in Bootstrap 4 customization

In my current application, I am utilizing bootstrap and aiming to solely customize the primary color in the provided scss file below: // Custom.scss $theme-colors: ( "primary": #243B55 ); // Option A: Include all of Bootstrap @import "../node_module ...

csstwitter-bootstrapbootstrap-4sass

Dynamically getting HTML and appending it to the body in AngularJS with MVC, allows for seamless binding to a

As someone transitioning from a jQuery background to learning AngularJS, I am facing challenges with what should be simple tasks. The particular issue I am struggling with involves dynamically adding HTML and binding it to a controller in a way that suits ...

javascriptjqueryhtmlangularjsasp.net-mvc

How to position div elements side by side using CSS and center them, even on IE8

UPDATE: I have discovered that implementing Bart's solution is the correct one. With a 264px wide div containing the other divs and their 1px borders, I achieved the desired effect. I have updated my code to include his answer. Thank you, Bart. Once ...

htmlcssinternet-explorer-8

Adjusting image width to fit the screen while maintaining its aspect ratio and maximum size

I am seeking a solution to display an image that adjusts its width to fit the browser screen, while also resizing its height according to the aspect ratio without exceeding its original size. I came across this post, and although it provided some guidance, ...

jqueryhtmlcssimage

Unable to modify the innerText of an element within a callback function

I'm working on creating a dynamic "reset" button that switches its text message back and forth in a loop. The first click changes it from "Reset" to "Are you sure?" and the second click changes it back to "Reset." However, I am having trouble updating ...

javascripthtmlbootstrap-5

Internet Explorer 10.0.9200 seems to have a tendency to overlook CSS styles

In my web application, I have implemented a 'tab toolbar' with 3 tabs. When a user clicks on a tab, the page displays different data based on which tab is selected. To visually indicate to the user which tab they have clicked on, I dynamically c ...

javascripthtmlcssinternet-explorer-10

Process only the $_POST variables that have a specific string prefix

I am currently working on a form that will be handling numerous elements sent via $_POST. A significant portion of these elements, which are too numerous to list individually, have a consistent naming pattern: $_POST['city_1'] $_POST['city_ ...

phphtmlarraysformspost