How can you easily center content vertically on a web page?

Question

How can you easily center content vertically on a web page?

There has been plenty of back-and-forth regarding this issue, with proposed solutions ranging from pure CSS to pure HTML. Some can get quite complex, involving deeply nested divs and intricate CSS rules. I'm looking for a simple and uncomplicated answer to this problem. It should not depend on CSS tables (such as {display: table;} because I am already using that to toggle the visibility of the entire div, and solutions involving it never seem to integrate smoothly with my existing codebase. Can anyone provide guidance on how best to approach this?

html css

Answer 1

Answer №1

Here is the solution I devised:

<style type="text/css">
  table.center {
    width: 100%;
    height: 100%;
  }
  h1.center {
    text-align: center;
  }
</style>

<div id="hide-able">
  <table class="center">
    <tr><td><h1 class="center">This is perfectly centered!</h1></td></tr>
  </table>
</div>

Answer 2

Here is the solution I devised:

<style type="text/css">
  table.center {
    width: 100%;
    height: 100%;
  }
  h1.center {
    text-align: center;
  }
</style>

<div id="hide-able">
  <table class="center">
    <tr><td><h1 class="center">This is perfectly centered!</h1></td></tr>
  </table>
</div>

Answer 3

Answer №2

try setting the outer container to have a margin of 0 auto and a width of 900px like this:

#wrapper{margin:0 auto;width:900px}

this should give you a clean design. don't forget to include the doc-type for compatibility with Internet Explorer.

Answer 4

try setting the outer container to have a margin of 0 auto and a width of 900px like this:

#wrapper{margin:0 auto;width:900px}

this should give you a clean design. don't forget to include the doc-type for compatibility with Internet Explorer.

How can you easily center content vertically on a web page?

Answer №1

Answer №2

Similar questions

Using single and double quotes in combination with brackets in PHP: a guide

Customizing React-Data-Grid styles using Material-UI in a React application

Creating a dynamic dropdown menu using JQuery that does not automatically submit the form when a value is

Background with funky Font Awesome colors

CSS - Button with upwards pointing arrow, requiring it to point downwards when hovered over

The submit button appears as grey on IOS when using the input[type="submit"]

Trouble displaying complete image (ReactJS, CSS)

Designing a unique pagination layout for your WordPress website

Arranging components in a horizontal layout on Jquery mobile

Save an HTML5 canvas element as a picture using JavaScript and specify the file extension

Don't conceal the :after and :before elements when using CSS custom checkboxes

Verify whether the labels are blank, remain as they are, or transfer the data to the database

Tips for incorporating an anchor tag within an img tag in HTML?

Rearrange items in a display: contents wrapper using CSS Grid

I can't seem to get the dropdown list to appear. What could be the issue?

Shimmering effect on hover for CSS animation

How can I show a div beneath a row in an HTML table?

Creating nested tables by assigning unique Div IDs to each table element

Retrieve the Vue.js JavaScript file from the designated static directory

Display a modal when clicking on a bootstrap glyph icon