Attempting to vertically center text within a percentage div

I'm trying to create a button that is centered on the screen with text aligned vertically within the button. I want to achieve this using CSS only and restrict the usage of percentages only. Here's what I have so far:

Check out my code snippet here

HTML

<div id="outer">
    <div id="button">
        button text
    </div>
</div>

CSS

body {
    margin : 0px;
}
#outer {
    position : absolute;
    width : 100%;
    height : 100%;
    background-color : #123456;
    text-align: center;
}
#outer:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#button {
    height : 50%;
    width : 50%;
    background-color : #FFFFFF;
    display: inline-block;
    vertical-align: middle;
}
css

Answer №1

In today's web design, it's best to use display properties and keep things in the flow. Absolute positioning is considered outdated :)

For example, you can try using display:table.

html, body {
    height:100%;
    width:100%;
    margin:0;
}
html {
    display:table;
}
body {
    display:table-cell;
    vertical-align:middle;
    background:#48a
}
#button {
    height: 50%;
    width: 50%;
    background-color: #FFFFFF;
    margin:auto;
    text-align:center;
}
/* Improved way to vertically center pseudo element */
#button:before {
    content:'';
    height:100%;
    ;
    vertical-align:middle;
    display:inline-block;
}

You can also explore using display:flex in your layouts.

html, body {
    height:100%;
    width:100%;
    margin:0;
}
body {
    display:flex;
    background:#48a
}
#button {
    height: 50%;
    width: 50%;
    background-color: #FFFFFF;
    margin:auto;
    text-align:center;
}
/* Improved way to vertically center pseudo element */
# button:before {
    content: '';
    height: 100%; ;;
    vertical-align: middle;
    display: inline-block;
}

If you want to apply flex display to the button box as well, you can add these rules and remove the pseudo element:

#button {
    height: 50%;
    width: 50%;
    background-color: #FFFFFF;
    /* To center itself in flex box */
    margin: auto;
    /* To center inside content */
    justify-content: center;
    display: flex;
    align-items: center;
}

display:flex; is supported by latest versions of Opera, Chrome, Firefox, and IE.

display: table; works with most browsers, including IE8 and above.

Answer №2

If utilizing flexbox is an option, a practical and tidy solution would be as follows:

Include the following code in the #outer container to centrally align the button div:

#outer {
  ...
  display: flex;
  align-items: center;
  justify-content: center;
}

Then, apply the following styles to the #button to align the text within:

#button {
    ...
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

It is also necessary to remove the display: inline-block; property from inside #button.

Here's a working fiddle (tested on Firefox and Chrome on MacOS): http://jsfiddle.net/8BJ94/53/

For a comprehensive overview of flexbox support, you can refer to this resource: http://caniuse.com/flexbox

Answer №3

Another way to experiment with display table-cell without relying on pseudo selectors is shown below:

<div class="container">
    <div class="box">
        <div id="button">click me</div>
    </div>
</div>
html, body {
    height:100%;
}
.container {
    display:table;
    height:100%;
    text-align:center;
    border:1px solid blue;
    width:100%;
}
.box {
    display:table-cell;
    vertical-align:middle;
    border:1px solid orange;
}
#button {
    background-color : #00f;
    display: inline-block;
    vertical-align: middle;
    padding:50px;
}

http://jsfiddle.net/8BJ94/57/

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

Difficulty encountered when trying to customize a polymer element that has been expanded (paper-slider)

I've been customizing the Polymer paper-slider element to handle an enumerated list and cycle through these values in the slider instead of just showing numeric values. However, I'm struggling with getting the styles to align properly. When you r ...

javascripthtmlcsspolymer

Radio buttons have been concealed and are not visible

Tried the solutions recommended in a previous question about radio buttons not showing in Safari and Chrome, but unfortunately, it did not solve my problem. It seems like this issue is different from the one discussed in that question. The WordPress them ...

htmlcssradio-button

Tips for implementing SVG in background images on Internet Explorer

Having a similar issue to the one discussed in this thread. My background images are functioning properly on all browsers except for versions lower than IE10. After reading through that post, I created a background image in SVG format specifically for IE10 ...

htmlcssinternet-explorersvg

The poker table designed with CSS does not resize effectively when displayed in smaller dimensions

I have put together a CSS poker table design that I am quite happy with at the moment: https://jsfiddle.net/78fcs01m/3/ CSS: .poker-container { display: grid; width: 100vw; height: 100vh; .poker-table { justify-self: cent ...

cssresponsive-design

Make sure all the table rows have the same height to completely fill the table regardless of the number of rows

Looking for a solution to create a table with a fixed height of 280px, whether it has 3 or 4 rows. Is there a method to adjust the row heights based on the number of rows in the table, so that they fill up the table's height? To clarify, when the ta ...

htmlcss

CSS background image not displaying in ReactJS with SCSS

Currently, I am working on a React project and I am trying to incorporate a local image from a public folder as the background for a div container with transparent color. However, I am facing an issue where the image is not being displayed. I have success ...

cssreactjssassbackground

The form submission messages that are being received are appearing blank, even when the name field is populated with an

Hey there! I'm experiencing an issue with my form. Even though I've set the name attribute to "" for all fields, the submitted data comes back blank in my email. Here's a snippet of my code: <div class="col-lg-6 ...

htmlcssemailform-submit

Interactive Sideways Navigation Bar

showcases a sleek horizontal scrolling menu on mobile devices. I aim to replicate this functionality for a website I'm redesigning that features extensive navigation elements. Key Features: Left and right scroll button options Centered list item op ...

javascriptjqueryhtmlcssmobile-website

What is the best way to resize an image for mobile site optimization?

I've been struggling with resizing an image by its width for different mobile devices even after trying to search on Google. Here's what I have attempted: CSS: img.test { width: 100%; height: auto; } HTML: <html> <head> ...

htmlcssimage

How can I obtain the width of one element and then use it to adjust the size of another element that is

Currently, I am working on a dropdown menu and facing an issue with setting the submenus to match the width of the top-level page. In my HTML structure (specifically for a WordPress theme), it looks something like this: <ul class="menu"> <li ...

javascriptjquerycsswordpress

Using Next.js in conjunction with Tailwind CSS and the shadcn/ui library to tackle the issue of preventing overscroll from creating

As I delve into a Next.js project, my goal is to use Tailwind CSS to craft an interface featuring a sidebar on the left, a header at the top, and a main content area. However, an issue has surfaced where users can over-scroll, leading to a blank space appe ...

cssnext.jstailwind-cssshadcnui

Header Menu Click Causes Blurring of Website Background

I need help adding a blur effect to my site background only when the header menu is clicked and active. Once the menu is activated, the .ct-active class is added to it. The CSS code below works for styling individual items - the menu turns red when activ ...

cssmenuheaderblur

adjusting the width of an HTML table cell

I'm struggling with the code below: <table> <thead> <th class='1'>Date</th> <th class='2'>Start Time</th> <th class='3'>End Time </th> <th class='4 ...

htmlcss

How can we ensure that specific criteria are displayed once a selection is made?

Users have multiple options to choose from. When a user selects one option, I want to display additional options that are dependent on the initial selection. For example, if the user can select between 1 or 2 gates, upon choosing a number I will show all t ...

phpjqueryhtmlcss

Tips for using the window.print() function to display and print another php or html page

<script type="text/javascript> window.print('page.php'); //Can you help me understand how to use window.print() function to print another php or html page? ...

phphtmlcss

Create Event Button for Your Schedule

Looking to create a button that can add events to a calendar using only HTML and CSS, without the need for Javascript. While I've come across similar solutions involving Javascript, I'm specifically focused on finding a solution that doesn't ...

htmlcssbuttoncalendaraddition

Missing dots on owl carousel

Currently, I am working on a project that involves using the owlcarousel library in javascript. Everything was running smoothly until I encountered an issue. Although I have set the dots to true in the code, they are not appearing on the carousel. Below i ...

javascriptcssowl-carousel

The menu bar created from getJSON is not displaying the jQuery UI CSS styles as expected

I have been working on creating a jQueryUI menubar using JSON data. The JSON data is successfully being converted into valid HTML, but the menubar does not display with the desired styling. It appears as an unstyled unordered list rather than a styled menu ...

jquerycssjsonjquery-ui

Resolving Issues with Page Feature Images on Your WordPress Site

Currently enrolled in a web development course, I collaborated with my instructor to create a custom website. However, I am facing an issue where the header image appears shorter on the Resources page () and Contact page () compared to the Blog page (). De ...

phphtmlcsswordpressdynamic

Position a div container to be aligned at the bottom of an image

I'm having trouble aligning a div container at the bottom of an image. I attempted to modify the position attribute of the image and set its value to "relative." It's a bit challenging to explain, but here are snippets of HTML and CSS code with ...

htmlcss