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
Vertically center with variable height
This is how I would solve your issue personally...
The following code shows how you could vertically align your elements via the use of ghost elements...
Potential Solution:
.outer {
height: auto;
text-align: center;
background: #444;
}
.outer:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
span {
font-size: 50px;
vertical-align: middle;
color: #FFF;
}
.inner {
padding: 10px;
width: 40rem;
display: inline-block;
vertical-align: middle;
font-size: 20px;
color: #FFF;
text-transform: uppercase;
}
<div class="outer">
<span>+</span>
<div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscin…</div>
</div>
<div class="outer">
<span>+</span>
<div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… </div>
</div>
<div class="outer">
<span>+</span>
<div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… </div>
</div>
how to vertically center a div of variable height in a fixed height div
To vertically center elements in a fixed-height parent element set their vertical-align: middle
. Add an additional element displayed as an inline-block
with a zero width
and full height.
Sample HTML:
<div class="container">
<div class="height"></div>
<img ...>
<img ...>
</div>
Sample CSS:
.container {
height: 300px;
}
.height {
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
}
.container > img {
vertical-align: middle;
}
Demo at JS Bin
If you know the height of the container you can also set it's line-height
to the same value instead of using the div.height
.
How can I vertically center text in a dynamically height div?
The best solution I've ever encountered is to make use of the display
property and set the wrapper element as a table
to allow the usage of vertical-align:middle
on the element to be centered:
See this working Fiddle Example!
HTML
<body>
<div>
<h1>Text</h1>
</div>
</body>
CSS
body {width: 100%; height: 100%;} /* this is just to "view" the div height...*/
div {
position:absolute; height:100%; width:100%;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align:center;
}
TESTED ON
Windows XP Profissional versão 2002 Service Pack 3
- Internet Explorer 8.0.6001.18702
- Opera 11.62
- Firefox 3.6.16
- Safari 5.1.2
- Google Chrome 18.0.1025.168 m
Windows 7 Home Edition Service Pack 1
- Internet Explorer 9.0.8112.164211C
- Opera 11.62
- Firefox 12.0
- Safari 5.1.4
- Google Chrome 18.0.1025.168 m
Linux Ubuntu 12.04
- Firefox 12.0
- Chromium 18.0.1025.151 (Developer Build 130497 Linux)
Vertically centered text in a dynamic height wrapper
Flexbox can do that...
.wrap { height: auto; position: relative; width: 50%;}
.wrap a img { height: auto; width: 100%;}
.wrap a span.text { height: 100%; left: 0; position: absolute; text-align: center; top: 0; width: 100%; display: flex; justify-content: center; align-items: center;}
.wrap a span.text span { color: #fff; font-size: 20px; font-weight: bold; line-height: 1.25}
<div class="wrap"> <a href="#"> <img src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg" /> <span class="text"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id praesentium nihil iure amet dolore nulla totam modi </span></span> </a></div>
Vertically align div in a parent of variable height
The primary issue here is that you need the left and right divs to have the same height automagically. Other than javascript, only flexbox and css tables allow for that. So...
Flexbox can do that.
.wrapper { width: 20em; margin: 1em; border: 1px solid #999; overflow: hidden; display: flex;}.left { flex: 0 0 70%;}.right { flex: 1; display: flex; justify-content: center; align-items: center;}.button { width: 3em; border: 1px solid #999; text-align: center;}
<div class="wrapper"> <div class="left">Every person is worth just as much as the things they busy themselves with.</div> <div class="right"> <div class="button">button</div> </div></div>
Vertically align a div in a parent which has height auto AND min-height set?
Here is one approach using the CSS3 transform property.
Use absolute positioning to place the top edge of the child element at 50% from the top, and then use the transform: translateY(-50%)
to adjust for the child's height.
.parent { height: auto; min-height: 200px; border: 1px dotted gray; position: relative;}.child { border: 1px dotted blue; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}.content { margin-left: 100px; margin-right: 400px;}
<div class="parent"> <div class="child">child</div> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo. </div></div>
Related Topics
Vuejs Vue-Router Linking an External Website
Bootstrap Take Full Width for Select Drop Down
How to Make Ng-Select Remove-And-Read-Only
How to Scale an Image Proportionally Within a Table Cell of a Fixed Size
Bootstrap 4 - Change Position of Carousel Controls
Bootstrap 4 Table With One Column Larger Than Others
Is There a CSS Selector for Elements Containing Certain Text
How to Change Angular Material Table Row Height
How to Wrap or Truncate Long Strings in a Material-Ui Expansionpanelsummary
Add Footer Text in Each Page of Pdf Using CSS
How to Set the Size of a Column in a Bootstrap Responsive Table
How to Word-Wrap Long Words in a Div
Format Text in a ≪Textarea≫
Line Before and After Title Over Image