How to center div vertically inside of absolutely positioned parent div
First of all note that vertical-align
is only applicable to table cells and inline-level elements.
There are couple of ways to achieve vertical alignments which may or may not meet your needs. However I'll show you two methods from my favorites:
1. Using transform
and top
.valign {
position: relative;
top: 50%;
transform: translateY(-50%);
/* vendor prefixes omitted due to brevity */
}
<div style="position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>
Vertically align absolutely positioned element with flexbox
To center the .container
element with flex, you need to make the parent a flex container.
The justify-content
and align-items
properties are declared on a flex container, but apply to child elements (flex items).
However, since .container
is absolutely positioned, flex won't work:
An absolutely-positioned child of a flex container does not participate in flex layout.
As an alternative, you can try this:
html { height: 100%; }
body {
height: 100%;
position: relative;
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
For an explanation of this centering method see this post:
- Element will not stay centered, especially when re-sizing screen
Vertical Align with Absolute Positioning
add a parent div with display:table
and height:100%
to .table-cell
will fix this
So the html structure wil be :
<div class="middle">
<div class="table">
<div class="table-cell">
<p>test</p>
</div>
</div>
</div>
add this Style:
#sidebar .table{
display:table;
height:100%;
}
See jsfiddle I have modified
vertical align in pseudo-element with absolute position
You can reset the line-height
to normal
or so on the absolute positioned pseudo element, and use top: 50%
+ transform: translateY(-50%)
to center it vertically.
I also suggest to use left: 100%
rather than right: -180px
, so that it works with dynamic button width.
.button {
position: relative;
background: gray;
width: 200px;
height: 36px;
margin: 10px auto;
text-align: center;
line-height: 36px;
cursor: pointer;
}
.button:after {
content: attr(data-text);
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 100%;
margin-left: 10px;
width: 170px;
text-align: left;
line-height: normal;
cursor: default;
background: pink;
}
<div>
<div class="button" data-text="response text here">click me!</div>
<div class="button" data-text="response text response text here">click me!</div>
</div>
Center horizontally and vertically an absolute positioned element without knowing the size
Explanation
Change the CSS property position
of the wrapper to relative and of element you want centered to absolute.
Then position the element in the middle of the wrapper using top: 50%
and left: 50%
.
After this you will notice that the element is not exactly centered, because it's own height and width are off the calculation.
So we fix with the property transform: translate(-50%, -50%)
, which brings the element half of it's height up, and half it's width left. The result will be a vertically and horizontally centered element.
Since we are taking IE8 into consideration, we will use a filter
to achieve the same effect as the transform: translate
.
In order to generate the filter
attribute, the following resource was used: IE's CSS3 Transforms Translator
Example
.box {
margin: 10px;
display: inline-block;
position: relative;
}
.box span {
position: absolute;
top: 50%;
left: 50%;
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 1);
padding: 5px;
}
.box.translate > span {
transform: translate(-50%, -50%);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
}
<div class="box translate">
<img src="http://placehold.it/500x200" />
<span>centered text</span>
</div>
position: absolute and vertical-align: middle
Yes, you need to remove position: absolute
from .data, and absolute position the .bar-chart-bar and set the z-index accordingly :
.bar-chart-bar {
background-color: #e8e8e8;
display: block;
position: absolute;
width: 100%;
height: 20px;
top: 0;
left: 0;
z-index: -1;
}
https://jsfiddle.net/jamesking/pr1v6Lhd/2/
css. vertical center in absolute positioned DIV
A modern way to go is like this (I recommend the extra div):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.title {
height: 100%;
position: absolute;
text-align: center;
width: 100%;
}
.title-inner {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="title">
<div class="title-inner">
<div>
<span>03</span>
</div>
<h2>
title
</h2>
</div>
</div>
</body>
</html>
Vertical align a button in an absolute positioned div
The alignment issue you see is being caused by the margin-top: -17px
line as seen by this updated fiddle with that line removed on the .btn
class: Updated Demo
On another note, vertical alignment is notoriously problematic with old CSS selectors, and it would be a good idea to transition over to Flexbox unless you needed to support older browsers.
Here's your problem with the new display: flex
selector and corresponding sub-selectors: Demo w/ Flexbox. This removes the emphasis on having to pixel fudge to get proper vertical alignment.
New .box
class
.box {
width:200px;
height:100%;
position:absolute;
left:0;
top:0;
background:yellow;
text-align:center;
padding:20px;
/* New lines for alignment */
display: flex;
align-items: center;
justify-content: center;
}
New .btn
class (just removed the old tags)
.btn {
display:inline-block;
padding:5px 12px;
line-height:34px;
color:#fff;
background:red;
}
EDIT: After researching block elements have the property to expand to 100% of the parent container. This can be explained in more detail here. This is why display:block
div expands until it reaches the padding on the .box
class.
To answer why the display: inline-block
element is slightly misaligned is because by default it is aligned on the baseline
. See here for reference. Changing the vertical alignment of the div to be vertical-align: top
will fix this.
Here is the new fiddle that uses all your previous syntax just with the added vertical-align: middle
property.
Vertically centering, absolute position, multiple elements
Make the children inline-block and use vertical-align:middle
. No need for positioning.
a {
vertical-align: middle;
display: inline-block;
}
.parent-container {
text-align: center;
background:palegoldenrod
}
<div class="parent-container">
<a href="">Some content</a>
<a href="">
<img src="http://www.fillmurray.com/140/100">
</a>
</div>
Related Topics
Flexbox Adding Newline to Clipboard
How to Use El for External CSS Files with Jsf
Apply a CSS Filter Only on Background
Adjacent Divs with Angled Borders
Textarea's Rows, and Cols Attribute in CSS
Bootstrap 3:Vertically Center Navigation Links When Logo Increasing the Height of Navbar
Css:After Encoding Characters in Content
Fixed Header Position in Bootstrap 3 Modal
How to Load CSS Asynchronously Without Using JavaScript
Firebug Lite Messagequeue Null
Prevent Children from Inheriting Rotate Transformation in CSS
Ie10/11 Uses Transition:-Webkit-Transform
Do Double Forward Slashes Direct Ie to Use Specific CSS
How to Convert .Svg Files to a Font
How to Properly Introduce a Light/Dark Mode in Bootstrap
CSS Vertically Centering a Fixed Positioning Div
Multiple CSS Keyframe Animations Using Transform Property Not Working