Center text horizontally and vertically without display table

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;
}

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

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>

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,

John,

What sort of end look are you going for?

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.

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