Center text horizontally and vertically without display table

HTML & CSS
1

Hi all

I have a jsfiddle here - http://jsfiddle.net/j4zvyz7h/1/

I need a overlay the full width and height of the page and text to be dead center.

I can do this with display: table; but I need height: 100%; on the html and body.

This is causing problems in the actual code.

Is it possible to have the 100% overlay with centered text without display: table;

I have an example here - http://jsfiddle.net/j4zvyz7h/2/

I can center it horizontally but not vertically.

Is it possible to center the text horizontally in the second example.

html, body{
    height: 100%;    
}

.block{
    background: rgba(230, 97, 97, 0.4);
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
}

.text{
    display: table-cell;
    vertical-align: middle;
}
2

How do you imagine this working onto your webpage? This will help me in knowing what sort of approach is feasible for your webpage.

3

Mostly your code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/community/t/center-text-horizontally-and-vertically-without-display-table/156427
ttmt
centered and middled in overlay box
-->
    <style type="text/css">
html, body {}  /* deleted height:100%; */
.block {
    position:fixed;  /* Add Me */
    background:rgba(230, 97, 97, 0.4);
    display:table;
    width:100%;
    height:100%;
}
.text {
    display:table-cell;
    vertical-align:middle;
    text-align:center;  /* moved, just because */
}
    </style>
</head>
<body>

<div class="block">
    <div class="text">
        <p>Centered Text</p>
    </div>
</div>

</body>
</html>

I had to play (goes with the species). 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>centered and middled in overlay box</title>
<!--
http://www.sitepoint.com/community/t/center-text-horizontally-and-vertically-without-display-table/156427
ttmt
centered and middled in overlay box
-->
    <style type="text/css">
html,body {}
body {
    background-color:rgba(230, 97, 97, 0.2);
}
.overlaybox {
    display:table;
    position:fixed;
    width:100%;
    height:100%;
}
.overlay {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
h2 {
    display:inline-block;
    border:12px solid red;
    border-radius:45%;
    padding:1em;
    background-color:rgba(255,255,255,.5);
}
a {
    position:relative;
}

    </style>
</head>
<body>

<div class="overlaybox">
    <div class="overlay">
        <h2>Overlaying Text<br> might go here!</h2>
    </div>
</div>
<div class="outer">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</a></p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</a></p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</a></p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

</body>
</html>
4

I have been struggling with a similar problem but it is to do with background images, retaining aspect ratio for different screen sizes with a Youtube centered button…

http://www.johns-jokes.com/downloads/sp-d/bg-img-aspect-ratio-with-yt-btn/index.php

I would be grateful for your help,

5

John,

What sort of end look are you going for?

1466×774 79.3 KB

FYI, direct children of the body element (no other parent) can only get percentage heights properly working (your height:100%) by setting html,body{height:100%;}

Not sure your end game so I just threw out that image to see if it’s close? I zoomed it out a lot to help yo usee.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.