What is the best way to center a heading 2 element vertically within a div?

Can someone help me with aligning the h2 element vertically and horizontally in the center of the div? You can find my codepen here.

html

<div class="container">
   <h2 class="center">
      Hello World!
   </h2>
</div>

css:

 .container {
position:relative !important;
height: 100%;
margin: 0 auto;
 display:table;
}

.center {
text-transform: uppercase;
text-align: center;
z-index: 200;
position: absolute;
  vertical-align:middle;
font-size: 4em;
margin: 0;
padding: 1em .75em 0 .75em;
line-height: .8;
text-shadow: 1px 1px 10px #666666;
  display:table-cell;
}
htmlcss

Answer №1

Get rid of the positoin properties and replace them with 100% for both body and html.

body,html{height:100%; padding:0; margin:0;} 
.container {    
    height: 100%;
    margin: 0 auto;
    padding:0;
    display:table;
}

.center {
    text-transform: uppercase;
    text-align: center;
    z-index: 200;    
    vertical-align:middle;
    font-size: 4em;
    margin: 0;
    padding:0;
    text-shadow: 1px 1px 10px #666666;
    display:table-cell;
}

VIEW DEMO

Answer №2

It seems like there may be a more optimal solution available. However, here is an alternative approach:

.wrapper {
    height: 100%;
    border: 1px solid #000;
}
body,html{
    height: 100%;
}
.centered {
    border: 1px solid #ddd;
    text-transform: uppercase;
    z-index: 200;
    position: absolute;
    display: inline-block;
    text-align:center;
    left: 25%;
    right: 25%;
    top: 25%;
    bottom:25%;
    font-size: 4em;
    line-height: .8;
    text-shadow: 1px 1px 10px #666666;
}

Answer №3

Using the CSS property display:flex;
can provide a simple solution for creating a responsive layout. Check out this CodePen example for a demonstration: http://codepen.io/anon/pen/eRabc

html,body {
  height:100%;
}
.container {
  min-height:100%;
  display:flex;
}

.center { 
  margin:auto;
  text-transform: uppercase;
  font-size: 3.5em;
  text-shadow: 1px 1px 10px #333333;
}

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

Attempting to incorporate a new CSS sub menu alongside the current one

Having trouble with menu styling, I'm new to this and trying to add a sub menu to an existing drop down menu. Check out my JSFiddle This is the CSS code: .menu_main { float: left; width: 60%; } #access .menu { list-style: none; font-weight: normal ...

cssdrop-down-menunavigationsubmenumulti-level

Shifting hues with every upward and downward movement

I am experiencing a small issue with this JS code... -I have multiple divs that are changing automatically in rows as they move randomly... I want to change the color of the div moving up to green. And for the div moving down, I want to change the colo ...

javascriptjqueryhtmlcss

What is the best way to ensure a CSS element maintains its position margins even after adjusting them with JavaScript?

Currently, I am in the process of developing a minesweeper game using a combination of HTML, CSS, and JavaScript. The code snippet I am utilizing to generate the grid is as follows: <div id="game-space"></div> <script type="t ...

javascripthtmlcssfrontendbackend

Struggling to get a price calculator up and running efficiently

The code I have should be functioning, however, when I insert it into the code module in the Divi theme on WordPress, it doesn't work. Interestingly, when I try it in a notepad, it works perfectly fine but fails to function on the website itself. () ...

javascripthtml

Solid white border encasing the full page

While I know there have been similar questions asked before, I believe mine is unique because I haven't found a solution anywhere. Recently, I started a new project in React. I decided to remove App.css and index.css, and created a single component wh ...

htmlcssreactjsstyled-components

Buefy: Secure the header of the table in place while allowing the rows to scroll freely

How can I make the header of the table component stay fixed while allowing only the rows to scroll? ...

javascriptcssvue.jsbuefy

Experimenting with combining a CSS class alongside the Nth-child selector

Hello, I've been researching various sources including Stackoverflow on how to effectively use an Nth child selector and a Class together but have not had much success so far. In essence, my menu consists of Main categories (class = cat) and subcateg ...

csscss-selectors

Is there a way to deactivate keyboard input on an HTML number input field? How about in a React or Material-UI environment?

I am working with an <input> tag that has the attribute type="number", and I want to disable keyboard input so that users are required to adjust the value using the spinner (up and down arrows). This will allow me to consume the input value on each c ...

javascripthtmlreactjsmaterial-ui

Utilize PHP to import data from a CSV file into a MySQL table

Currently, I am attempting to upload data to my table by importing a CSV file to my PHP page. The code I am using for this task is sourced from EggSlab <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "Test"; // Establ ...

phphtmlmysqlcsv

How to use jQuery to target the second or any desired div element with a specific class

I'm having trouble with something seemingly simple Let's say we are looking for a class called .contentdiv, for example. I am trying to target the second or nth occurrence of the .contentdiv class in a document and retrieve the HTML of that spe ...

javascriptjqueryhtml

Using Reactjs Material UI Table component results in grid expansion

I'm facing an issue with my Table component nested inside a Grid component. Whenever the Table component is rendered, it causes the Grid component to expand in width. I want the Grid component to maintain its original width when the Table component is ...

htmlreactjsmaterial-ui

What is the best method for locating the innermost element of an HTML tree that has a specific class assigned

I am working on a project that involves a menu system. One of the features I am implementing is that when a tree within the menu is opened, it receives the "active" class. My goal now is to dynamically retrieve the deepest sub-menu within this structure ...

javascriptjqueryhtml

Tips for concealing the Google Chrome status bar from appearing on a webpage

I have been intrigued by the rise of Progressive Web Apps (PWAs) and I am eager to dive into understanding them better. One common feature I have noticed in PWAs is the ability to hide the browser chrome, including the URL bar, back button, search fields, ...

javascripthtmlprogressive-web-apps

Learn how to change the input source in Ratchet's chat app to come from a text box on the webpage instead of the console

I followed the guidelines on to create a chat app. However, I now want to input data from a text box instead of using conn.send() in the console. How can I achieve this using php? I was successful in redirecting the sent message to an html element like ...

phpjavascriptjqueryhtmlratchet

Executing a function in cesium.js upon the occurrence of an event

I've set up a div like this: <div id="cesiumContainer" class="fullSize"></div> <div id="loadingOverlay"><h1>Loading...</h1></div> <div id="toolbar"><input type="search" id="search" placeholder="Search by l ...

javascripthtmlfunctioncesiumjs

Creating a flexible image layout within a container with relative positioning

I attempted to create a basic slideshow with images sliding from right to left as an animation: let slides = document.querySelectorAll('.img-container'); let l = slides.length; let i = 0; setInterval(function(){ i = (i + 1) % l; if(i == 0){ f ...

javascripthtmlcss

How come when I applied height:100% and position: absolute to .test2, it ended up being 200px instead of the expected 204px

Upon setting the height of a container element to 200px, I encountered an issue when trying to set the height of another element within it to 100%. The height didn't render as expected, as height:100% takes the height of the parent element, which was ...

htmlcss

Expand or collapse Angular Material Accordion depending on selected Radio button choice

Is it possible to use a mat-accordion with radio buttons where each panel expands only when its corresponding radio button is selected? I have the radio buttons functioning correctly, but the panels are expanding and collapsing with every click rather than ...

javascripthtmlangularangular-materialmaterial-design

Choose an option from a dropdown menu in Selenium using Python, specifically targeting the ng select combobox with

Trying to use Python and Selenium to select the 'MALE' option in a dropdown select using XPath in a combobox ng select. The code snippet I am using: driver.find_element_by_id("sex_0").click() driver.find_element_by_xpath("//*[contains(text(), & ...

pythonhtmlcssseleniumxpath

Ensure that all Woocommerce products have consistent height while allowing for variations in width

I am struggling with achieving consistent height for all the products on my website, while allowing for variable widths. I attempted to resolve this using UI, but unfortunately it was unsuccessful. Does anyone have suggestions on how to accomplish this u ...

htmlcsswordpresswoocommerce