vertically center div when body height: 100% without absolute pos
You can use display:table
and display:table-cell
:
html, body { width: 100%; height: 100%;}
body{ margin: 0; display: table}
body>div { display: table-cell; text-align: center; /* horizontal */ vertical-align: middle; /* vertical */}
<div> <img src="http://paw.princeton.edu/issues/2012/07/11/pages/6994/C-beer.jpg" /></div>
Vertically center text in a 100% height div?
This answer is no longer the best answer ... see the flexbox answer below instead!
To get it perfectly centered (as mentioned in david's answer) you need to add a negative top margin. If you know (or force) there to only be a single line of text, you can use:
margin-top: -0.5em;
for example:
http://jsfiddle.net/45MHk/623/
//CSS:
html, body, div {
height: 100%;
}
#parent
{
position:relative;
border: 1px solid black;
}
#child
{
position: absolute;
top: 50%;
/* adjust top up half the height of a single line */
margin-top: -0.5em;
/* force content to always be a single line */
overflow: hidden;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
}
//HTML:
<div id="parent">
<div id="child">Text that is suppose to be centered</div>
</div>
The originally accepted answer will not vertically center on the middle of the text (it centers based on the top of the text). So, if you parent is not very tall, it will not look centered at all, for example:
http://jsfiddle.net/45MHk/
//CSS:
#parent
{
position:relative;
height: 3em;
border: 1px solid black;
}
#child
{
position: absolute;
top: 50%;
}
//HTML:
<div id="parent">
<div id="child">Text that is suppose to be centered</div>
</div>
Vertically centering a div in body?
See this edited version of your jsFiddle.
Basically, just wrap your content in <div class = "main"><div class = "wrapper"></div></div>
, and add the following CSS:
html, body {
height: 100%;
}
.main {
height: 100%;
width: 100%;
display: table;
}
.wrapper {
display: table-cell;
height: 100%;
vertical-align: middle;
}
vertical-align in div with height 100%
Live Demo
I just made a jsFiddle showing my suggestion to a solution. Here I take into account that you want two <div>
s filling 50% of the width each, 100% height, and that you want the content to be vertically aligned in the middle. Here is the simplified working solution with source code.
HTML
<div id="outer">
<div id="table-container">
<div id="table-cell">
This content is vertically centered.
</div>
</div>
</div>
CSS
#outer {
position:absolute;
top:0;
left:0;
width:50%;
height:100%;
}
#table-container {
height:100%;
width:100%;
display:table;
}
#table-cell {
vertical-align:middle;
height:100%;
display:table-cell;
border:1px solid #000;
}
For reference, I used this tutorial.
How to vertically center content with variable height within a div?
Just add
position: relative;
top: 50%;
transform: translateY(-50%);
to the inner div.
What it does is moving the inner div's top border to the half height of the outer div (top: 50%;
) and then the inner div up by half its height (transform: translateY(-50%)
). This will work with position: absolute
or relative
.
Keep in mind that transform
and translate
have vendor prefixes which are not included for simplicity.
Codepen: http://codepen.io/anon/pen/ZYprdb
How to center text top/bottom when height 100% & display inline-block?
Try using Flexbox: This is the working example of vertically and horizontally centering with flexbox.
Working example
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
margin: 0
}
.testing-here {
font-size: 0;
}
.panel-default {
box-sizing: border-box;
position: relative;
width: 50%;
padding-bottom: 40%;
overflow: hidden;
background-color: #446CB3;
display: inline-block;
}
.panel-body {
color: white;
width: 100%;
height: 100%;
text-align: center;
position: absolute;
font-size: 16px;
justify-content: center;
align-items: center;
display: flex;
}
Related Topics
Em Vs Px and Cross Browser Compatibility
Bootstrap 4 Center Pagination in Column
Overwriting Styles from Bootstrap in an Angular2 Component-Stylesheet
Animating Svg Paths with Discontinuous Parts
Angular 8: Change Height in Mat-Form-Field to Specific Pixel Number
Fixed Vertical Positioning of CSS Within an Iframe
Webkit-Font-Smoothing: Suddenly Different Results in Chrome and Safari
Ruby on Rails Dropdown <Select> Menu - How to Style or Apply Class to The Options
Embedded Fonts Render Then Disappear
Twitter Bootstrap Accordion and Button Dropdown Overflow Issue
Concatenate Multiple CSS Files into One
Putting an Image as a Frame Around an Iframe
Text Gets Cut When Using <Select>
Div Elements to Follow a Curved Path with CSS3
How to Play an Animation on Hover and Pause When Hover Is Not Active