Attempting to vertically center text within a percentage div

Question

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

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

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 3

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 4

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 5

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/

Answer 6

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/

Attempting to vertically center text within a percentage div

Answer №1

Answer №2

Answer №3

Similar questions

HTML5, canvas covering every element

Using a single jQuery script, implement multiple modals on a webpage that are responsive on both desktop and mobile devices

The properties of the NextFont variable cannot be utilized in the CSS global scope when using the var() function

Unlocking the Potential of Larger jQuery Icons

Issues with the menu pop-up functionality arise when utilizing the CSS class .active

How can I achieve a full-width stepper in Bootstrap?

Utilizing flexbox, absolute positioning, and 100% height in web design

Rings that react to both width as well as height

Creating an intricate table layout using AngularJS and the ngRepeat directive

Issue with toggling in react js on mobile devices

Enhancing design precision from Figma to flawless pixels

The H1 tag is mysteriously displaying padding or margin on the bottom, despite not being set

ui-grid row size set to automatically adjust using rowHeight : 'auto'

Guide to making a toggle button with a Light/Dark mode functionality

How can we programmatically trigger a click action on an element obtained through an HTTP request with the help of Set

Adding a click function to a div individually when they share the same class in HTML

Is BEM mandating the creation of superfluous elements?

The use of Material-UI collapse animation in a table results in the insertion of div elements, triggering a validateDOMNesting warning

What is the best way to eliminate the left padding on a TimelineItem component?

Is there a way to use HTML and CSS to switch the style of a dynamic decimal number to either Roman numerals or Katakana characters within a specified HTML element, such as a tag, div