I have a div with two images and an h1. All of them need to be vertically aligned within the div, next to each other. One of the images needs to be absolute positioned within the div.
What is the CSS needed for this to work on all common browsers?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Wow, this problem is popular. It's based on a misunderstanding in the vertical-align property. This excellent article explains it:
Understanding vertical-align, or "How (Not) To Vertically Center Content" by Gavin Kistner.
“How to center in CSS” is a great web tool which helps to find the necessary CSS centering attributes for different situations.
In a nutshell (and to prevent link rot):
Inline elements (and only inline elements) can be vertically aligned in their context via vertical-align: middle. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. jsfiddle example
For block elements, vertical alignment is harder and strongly depends on the specific situation:
If the inner element can have a fixed height, you can make its position absolute and specify its height, margin-top and top position. jsfiddle example
If the centered element consists of a single line and its parent height is fixed you can simply set the container’s line-height to fill its height. This method is quite versatile in my experience. jsfiddle example
… there are more such special cases.
Now that Flexbox support is increasing, this CSS applied to the containing element would vertically center all contained items (except for those items that specify the alignment themselves, e.g. align-self:start)
.container {
display: flex;
align-items: center;
}
Use the prefixed version if you also need to target Internet Explorer 10, and older (< 4.4 (KitKat)) Android browsers:
.container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
I used this very simple code:
div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }
<div class="ext-box">
<div class="int-box">
<h2>Some txt</h2>
<p>bla bla bla</p>
</div>
</div>
Obviously, whether you use a .class or an #id, the result won't change.
.outer {
display: flex;
align-items: center;
justify-content: center;
}
It worked for me:
.vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
Vertically and horizontally align element
Use either of these. The result would be the same:
Bootstrap 4
CSS3
1. Bootstrap 4.3+
For vertical alignment: d-flex align-items-center
For horizontal alignment: d-flex justify-content-center
For vertical and horizontal alignment: d-flex align-items-center justify-content-center
.container {
height: 180px;
width:100%;
background-color: blueviolet;
}
.container > div {
background-color: white;
padding: 1rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="d-flex align-items-center justify-content-center container">
<div>I am in Center</div>
</div>
2. CSS 3
.container {
height: 180px;
width:100%;
background-color: blueviolet;
}
.container > div {
background-color: white;
padding: 1rem;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
<div class="container center">
<div>I am in Center</div>
</div>
A technique from a friend of mine:
div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}
<div style="height:100px; border:1px solid;">
<p style="border:1px dotted;">I'm vertically centered.</p>
</div>
Demo here.
To position block elements to the center (works in Internet Explorer 9 and above), it needs a wrapper div:
.vcontainer {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Use this formula, and it will work always without cracks:
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}
#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */
<div id="outer">
<div id="middle">
<div id="inner">
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>
All of them need to be vertically aligned within the div
Aligned how? Tops of the images aligned with the top of the text?
One of the images needs to be absolute positioned within the div.
Absolutely positioned relative to the DIV? Perhaps you could sketch out what you're looking for...?
fd has described the steps for absolute positioning, as well as adjusting the display of the H1 element such that images will appear inline with it. To that, i'll add that you can align the images by use of the vertical-align style:
#header h1 { display: inline; }
#header img { vertical-align: middle; }
...this would put the header and images together, with top edges aligned. Other alignment options exist; see the documentation. You might also find it beneficial to drop the DIV and move the images inside the H1 element - this provides semantic value to the container, and removes the need to adjust the display of the H1:
<h1 id=header">
<img src=".." ></img>
testing...
<img src="..."></img>
</h1>
Almost all methods needs to specify the height, but often we don't have any heights.
So here is a CSS 3 three-line trick that doesn't require to know the height.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
It's supported even in IE9.
with its vendor prefixes:
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Source: Vertical align anything with just 3 lines of CSS
Three ways to make a center child div in a parent div
Absolute positioning method
Flexbox method
Transform/translate method
Demo
/* Absolute Positioning Method */
.parent1 {
background: darkcyan;
width: 200px;
height: 200px;
position: relative;
}
.child1 {
background: white;
height: 30px;
width: 30px;
position: absolute;
top: 50%;
left: 50%;
margin: -15px;
}
/* Flexbox Method */
.parent2 {
display: flex;
justify-content: center;
align-items: center;
background: darkcyan;
height: 200px;
width: 200px;
}
.child2 {
background: white;
height: 30px;
width: 30px;
}
/* Transform/Translate Method */
.parent3 {
position: relative;
height: 200px;
width: 200px;
background: darkcyan;
}
.child3 {
background: white;
height: 30px;
width: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="parent1">
<div class="child1"></div>
</div>
<hr />
<div class="parent2">
<div class="child2"></div>
</div>
<hr />
<div class="parent3">
<div class="child3"></div>
</div>
My trick is to put a table inside the div with one row and one column, set 100% of width and height, and the property vertical-align:middle:
<div>
<table style="width:100%; height:100%;">
<tr>
<td style="vertical-align:middle;">
BUTTON TEXT
</td>
</tr>
</table>
</div>
Fiddle:
http://jsfiddle.net/joan16v/sbqjnn9q/
Using display flex, first you need to wrap the container of the item that you want to align:
<div class="outdiv">
<div class="indiv">
<span>test1</span>
<span>test2</span>
</div>
</div>
Then apply the following CSS content to wrap div or outdiv in my example:
.outdiv {
display: flex;
justify-content: center;
align-items: center;
}
Using CSS to vertical center, you can let the outer containers act like a table, and the content as a table cell. In this format your objects will stay centered. :)
I nested multiple objects in JSFiddle for an example, but the core idea is like this:
HTML
<div class="circle">
<div class="content">
Some text
</div>
</div>
CSS
.circle {
/* Act as a table so we can center vertically its child */
display: table;
/* Set dimensions */
height: 200px;
width: 200px;
/* Horizontal center text */
text-align: center;
/* Create a red circle */
border-radius: 100%;
background: red;
}
.content {
/* Act as a table cell */
display: table-cell;
/* And now we can vertically center! */
vertical-align: middle;
/* Some basic markup */
font-size: 30px;
font-weight: bold;
color: white;
}
The multiple objects example:
HTML
<div class="container">
<div class="content">
<div class="centerhoriz">
<div class="circle">
<div class="content">
Some text
</div><!-- content -->
</div><!-- circle -->
<div class="square">
<div class="content">
<div id="smallcircle"></div>
</div><!-- content -->
</div><!-- square -->
</div><!-- center-horiz -->
</div><!-- content -->
</div><!-- container -->
CSS
.container {
display: table;
height: 500px;
width: 300px;
text-align: center;
background: lightblue;
}
.centerhoriz {
display: inline-block;
}
.circle {
display: table;
height: 200px;
width: 200px;
text-align: center;
background: red;
border-radius: 100%;
margin: 10px;
}
.square {
display: table;
height: 200px;
width: 200px;
text-align: center;
background: blue;
margin: 10px;
}
.content {
display: table-cell;
vertical-align: middle;
font-size: 30px;
font-weight: bold;
color: white;
}
#smallcircle {
display: inline-block;
height: 50px;
width: 50px;
background: green;
border-radius: 100%;
}
Result
https://jsfiddle.net/martjemeyer/ybs032uc/1/
I have found a new workaround to vertically align multiple text-lines in a div using CSS 3 (and I am also using bootstrap v3 grid system to beautify the UI), which is as below:
.immediate-parent-of-text-containing-div {
height: 50px; /* Or any fixed height that suits you. */
}
.text-containing-div {
display: inline-grid;
align-items: center;
text-align: center;
height: 100%;
}
As per my understanding, the immediate parent of text containing element must have some height.
We may use a CSS function calculation to calculate the size of the element and then position the child element accordingly.
Example HTML:
<div class="box">
<span>Some Text</span>
</div>
And CSS:
.box {
display: block;
background: #60D3E8;
position: relative;
width: 300px;
height: 200px;
text-align: center;
}
.box span {
font: bold 20px/20px 'source code pro', sans-serif;
position: absolute;
left: 0;
right: 0;
top: calc(50% - 10px);
}
a {
color: white;
text-decoration: none;
}
Demo created here: https://jsfiddle.net/xnjq1t22/
This solution works well with responsive div height and width as well.
Note: The calc function is not tested for compatiblity with old browsers.
Using only a Bootstrap class:
div: class="container d-flex"
element inside div: class="m-auto"
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container d-flex mt-5" style="height:110px; background-color: #333;">
<h2 class="m-auto">H➲VER➾M⇡ND</h2>
</div>
By default h1 is a block element and will render on the line after the first img, and will cause the second img to appear on the line following the block.
To stop this from occurring you can set the h1 to have inline flow behaviour:
#header > h1 { display: inline; }
As for absolutely positioning the img inside the div, you need to set the containing div to have a "known size" before this will work properly. In my experience, you also need to change the position attribute away from the default - position: relative works for me:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
If you can get that to work, you might want to try progressively removing the height, width, position attributes from div.header to get the minimal required attributes to get the effect you want.
UPDATE:
Here is a complete example that works on Firefox 3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Example of vertical positioning inside a div</title>
<style type="text/css">
#header > h1 { display: inline; }
#header { border: solid 1px red;
position: relative; }
#img-for-abs-positioning { position: absolute;
bottom: -1em; right: 2em; }
</style>
</head>
<body>
<div id="header">
<img src="#" alt="Image 1" width="40" height="40" />
<h1>Header</h1>
<img src="#" alt="Image 2" width="40" height="40"
id="img-for-abs-positioning" />
</div>
</body>
</html>
My new favorite way to do it is with a CSS grid:
/* technique */
.wrapper {
display: inline-grid;
grid-auto-flow: column;
align-items: center;
justify-content: center;
}
/* visual emphasis */
.wrapper {
border: 1px solid red;
height: 180px;
width: 400px;
}
img {
width: 100px;
height: 80px;
background: #fafafa;
}
img:nth-child(2) {
height: 120px;
}
<div class="wrapper">
<img src="https://source.unsplash.com/random/100x80/?bear">
<img src="https://source.unsplash.com/random/100x120/?lion">
<img src="https://source.unsplash.com/random/100x80/?tiger">
</div>
Just use a one-cell table inside the div! Just set the cell and table height and with to 100% and you can use the vertical-align.
A one-cell table inside the div handles the vertical-align and is backward compatible back to the Stone Age!
For me, it worked this way:
<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
Login
</div>
The "a" element converted to a button, using Bootstrap classes, and it is now vertically centered inside an outer "div".
I have been using the following solution (with no positioning and no line height) since over a year, it works with Internet Explorer 7 and Internet Explorer 8 as well.
<style>
.outer {
font-size: 0;
width: 400px;
height: 400px;
background: orange;
text-align: center;
display: inline-block;
}
.outer .emptyDiv {
height: 100%;
background: orange;
visibility: collapse;
}
.outer .inner {
padding: 10px;
background: red;
font: bold 12px Arial;
}
.verticalCenter {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
</style>
<div class="outer">
<div class="emptyDiv verticalCenter"></div>
<div class="inner verticalCenter">
<p>Line 1</p>
<p>Line 2</p>
</div>
</div>
This is my personal solution for an i element inside a div.
JSFiddle Example
HTML
<div class="circle">
<i class="fa fa-plus icon">
</i></div>
CSS
.circle {
border-radius: 50%;
color: blue;
background-color: red;
height:100px;
width:100px;
text-align: center;
line-height: 100px;
}
.icon {
font-size: 50px;
vertical-align: middle;
}
Just this:
<div>
<table style="width: 100%; height: 100%">
<tr>
<td style="width: 100%; height: 100%; vertical-align: middle;">
What ever you want vertically-aligned
</td>
</tr>
</table>
</div>
A one-cell table inside the div handles the vertical-align and is backward compatible back to the Stone Age!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
#style_center { position:relative; top:50%; left:50%; }
#style_center_absolute { position:absolute; top:50px; left:50px; }
<!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
</style>
</head>
<body>
<div style="height:200px; width:200px; background:#00FF00">
<div id="style_center">+</div>
</div>
</body>
</html>
Here is just another (responsive) approach:
html,
body {
height: 100%;
}
body {
margin: 0;
}
.table {
display: table;
width: auto;
table-layout:auto;
height: 100%;
}
.table:nth-child(even) {
background: #a9edc3;
}
.table:nth-child(odd) {
background: #eda9ce;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
width: 50%;
vertical-align: middle;
}
http://jsfiddle.net/herrfischerhamburg/JcVxz/
<div id="header" style="display: table-cell; vertical-align:middle;">
...
or CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}
Browser Coverage
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How to vertically align an image inside a div
(37 answers)
Closed 10 months ago.
If I want to fit a large image(with arbitrary aspect ratio) into a small div, according to this answer, I just need to set the maximum width and height to 100%,
img {
max-width: 100%;
max-height: 100%;
}
And if I need to further center the image, according to this answer, we can set the margin to auto,
img {
display: block;
margin: 0 auto;
}
But in this way, the image is only centered in horizontal. To have it vertically centered, I've tried following approaches but don't work.
img {
margin: auto auto;
}
img {
vertical-align: middle;
}
Any one can help?
you can use display flex:
.div {
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
}
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
Portrait Div
<div class="portrait div">
<img src="http://i.stack.imgur.com/xkF9Q.jpg" />
</div>
Landscape Div
<div class="landscape div">
<img src="http://i.stack.imgur.com/xkF9Q.jpg" />
</div>
Square Div
<div class="square div">
<img src="http://i.stack.imgur.com/xkF9Q.jpg" />
</div>
Here is a small trick to use...
First, make sure the parent div is set to position:relative;
Then in the img add this values
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%) !important;
This will automatically align the img in the middle of the parent div. You can delete all other values and use it like this
img {
max-width:100%;
max-height:100%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%) !important;
}
Based on if the inline height and width of the parent div has an aspect ratio larger or smaller than the image, the image will center either horizontally or vertically. There is a little cheat with JavaScript, but looking at the CSS, this seems to be close to what you were initially attempting.
$(".imgContainer").each(function() {
const height = $(this).height() > $(this).children("img").eq(0).height() ? parseFloat($(this).height() * 0.99) + "px": "100%";
$(this).css("line-height", height);
});
.imgContainer {
text-align: center;
border: 3px solid blue;
}
.imgContainer img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imgContainer" style="width: 435px; height: 320px">
<img src="https://i.stack.imgur.com/3WpTo.jpg">
</div>
<div class="imgContainer" style="margin-top: 10px; width: 435px; height: 260px">
<img src="https://i.stack.imgur.com/3WpTo.jpg">
</div>
<div class="imgContainer" style="margin-top: 10px; width: 435px; height: 289px">
<img src="https://i.stack.imgur.com/3WpTo.jpg">
</div>
I'm looking for an easy solution to implement the below. Thumbnails will not be cropped but the container they are in will always be the same height/width.
The idea is that images larger than the container would be responsive (ie. scale down), while images that are smaller than the container will be shown "as is."
The problem I'm having is three-fold:
How to handle the responsive element, since we need to account for various aspect ratios (ie. horizontal vs vertical vs square)
How to vertical align when necessary
Images that aren't larger than their container natively shouldn't scale up
Obviously, it would be great if this could be done with CSS only, but I understand javascript might be needed. If that's the case, I'm looking for a lightweight solution since the grid of thumbnails could get quite lengthy.
Any thoughts?
A pure CSS solution:
demo
.container {
display: inline-block;
position: relative;
width: 8em; height: 10em;
}
.container img {
position: absolute;
top: 50%; left: 50%;
width: auto; height: auto;
max-width: 100%; max-height: 100%;
transform: translate(-50%, -50%);
}
The images keep their natural size (width: auto; height: auto;) unless they are bigger than the container (max-width: 100%; max-height: 100%;), in which case they are going to take the size of the container that they exceed and scale the other one accordingly.
Positioning the images in the middle of the container: give them position: absolute and put their top left corner in the middle of the container (top: 50%; left: 50%;). Then translate them left and up by half their computed dimensions, whatever those would be (transform: translate(-50%, -50%);).
This solution works in browsers supporting 2D transforms. Sadly, this excludes IE8 and older and Opera Mini.
A better compatibility solution (that I cannot actually test right now in IE8, so I'm just assuming it should work there too) would be:
demo
.container {
display: inline-block;
width: 8em; height: 10em;
text-align: center;
white-space: nowrap;
}
.container img {
display: inline-block;
width: auto; height: auto;
max-width: 100%; max-height: 100%;
vertical-align: middle;
}
.container:after {
display: inline-block;
height: 100%; width: 0;
vertical-align: middle;
content: "";
}
First of all, give images display: inline-block;.
Set text-align: center; on container so that images that are less wide than the container get centred horizontally.
Now to make sure they are in the middle vertically as well. Give them vertical-align: middle;, but that's not enough. inline-block elements are vertically aligned with respect to their inline-block siblings and we have no siblings in this case. So we also need another middle vertically-aligned inline-block element that has the same height as the container. Or a pseudo-element on the container, it's the same thing.
This pseudo-element is going to have height: 100%; so that its vertical middle coincides to that of its parent and width: 0; so that it doesn't affect the horizontal alignment of the image (when the image's natural width < the container's width). It's also going to have display: inline-block; and vertical-align: middle; just like the image.
We also need white-space: nowrap; on the container to prevent the pseudo-element from moving below (and not affect the vertical alignment of the image this way) when the image occupies the entire width of the container.
This is actually the first question I asked on Stackoverflow! Now I know Ana has already come up with a working solution, I thought I'd also post mine that works IE8 onward:
http://jsfiddle.net/crtpq2jg/
Basic Markup:
<div class='container'>
<img src='http://www.lorempixel.com/100/200' />
</div>
CSS:
.container {
float: left;
width: 180px;
height: 210px;
text-align: center; /* to center align horizontally */
line-height: 210px; /* Equal to container height */
font-size: 0; /* This is to eliminate a weird ~2px vertical offset on the images. But you can just specify the font-size for any children elements that may contain text. */
}
.container > img {
width: auto; height: auto;
max-width: 100%; max-height: 100%;
vertical-align: middle;
}
This will work in IE 8 (demo)
Html from ana's answer
The trick is to use the after pseudo element to extend the containers line-height to its own height.
This way you can use regular text-align and vertical-align along with max-width and max-height.
.container {
display: inline-block;
position: relative;
border: solid .25em deeppink;
width: 8em;
height: 10em;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.container img {
display: inline-block;
vertical-align: middle;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.container:after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0px;
}
Have a look at this jsfiddle: http://jsfiddle.net/jQN4L/
The max-width and max-height cause the image to scale down if needed, but not scale up. Horizontal centering is done with text-align. Vertical centering is done with line-height and vertical-align, although this method does require that the container has a known height.
HTML:
<div id="d1">
<img src="http://i.imgur.com/VAZNIev.jpg" />
</div>
<div id="d2">
<img src="http://i.imgur.com/VAZNIev.jpg" />
</div>
CSS:
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
div {
text-align: center;
font-size: 0;
}
#d1 {
width: 200px;
height: 100px;
line-height: 100px;
background: red;
}
#d2 {
width: 100px;
height: 200px;
line-height: 200px;
background: green;
}
Changing my answer- should have read the question better!
html:
<div class="img_wrapper">
<img class ='full_width' src="1.png" />
<img class ='full_width' src="2.png" />
<img class ='full_width' src="3.png" />
</div>
css:
.img_wrapper {
width: 860px;
margin: 30px;
}
.full_width {
width: 200px;
height: 200px;
float: left;
margin: 10px;
vertical-align: middle;
}
.full_width img {
max-width: 100%;
max-height: 100%;
}
I am trying to design a mobile website. Need to get ABC middle vertically. I followed other SO questions reg how to get SPAN text vertically middle. But here its not working. I have included the jsfiddle. http://jsfiddle.net/3tdYT/ I am not sure what I am missing out.
<div id="main">
<div id="header">
<div id="logo"><img src="http://placehold.it/72x38"></div>
<div id="menu">a</div>
<div id="title-wrapper"><div id="title"><span id="screen-title">ABC</span></div></div>
</div>
<div id="company-name">CCCCCC</div>
</div>
* { margin:0; padding:0}
#header{
height:53px;
padding:0;
}
#logo{
float:left;
background: #ffffff;
padding:5px;
}
#title{
text-align:center;
height:100%;
margin:0 auto;
}
#title-wrapper{
height:100%;
background: #ff3eae;
}
#screen-title{
vertical-align: middle;
display: inline-block;
}
#menu{
width:20%;
height:100%;
float:right;
padding:0;
background: #E23222;
}
#company-name{
width:100%;
float:left;
background: darkblue;
clear:left;
padding:0px;
color: #ffffff;
text-align: center;
}
#main {width:240px}
Turn #title's display into a table and #screen-title's display into a table-cell:
/* ... */
#title{
display: table;
height:100%;
margin:0 auto;
}
/* ... */
#screen-title{
vertical-align: middle;
display: table-cell;
text-align: center;
}
http://jsfiddle.net/XMcCR/3/
But notice that there are lots of possibilitis to vertically center some text with css, each with its own specific disadvantages. This is just one possibility. Simply check some of the results of a quick Google search for "vertically center css". It almost appears to be some kind of own scientific field.
It seems that you have to set a static height and width for it.
That should work. have a try)
#screen-title{
display: table-cell;
height: 50px;
width: 200px;
text-align: center;
vertical-align: middle;
Add line-height: Xpx where X is a suitable value to get the effect you want (typically the same as the height of the element)