vertical align middle in div
You can use line-height: 50px;
, you won't need vertical-align: middle;
there.
Demo
The above will fail if you've multiple lines, so in that case you can wrap your text using span
and than use display: table-cell;
and display: table;
along with vertical-align: middle;
, also don't forget to use width: 100%;
for #abc
Demo
#abc{
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
background-color:#0F0;
height:50px;
display: table;
width: 100%;
}
#abc span {
vertical-align:middle;
display: table-cell;
}
Another solution I can think of here is to use transform
property with translateY()
where Y
obviously stands for Y Axis. It's pretty straight forward... All you need to do is set the elements position to absolute
and later position 50%
from the top
and translate from it's axis with negative -50%
div {
height: 100px;
width: 100px;
background-color: tomato;
position: relative;
}
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Demo
Note that this won't be supported on older browsers, for example IE8, but you can make IE9 and other older browser versions of Chrome and Firefox by using -ms, -moz
and -webkit
prefixes respectively.
For more information on transform
, you can refer here.
How can I vertically align elements in a 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 itsheight
,margin-top
andtop
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.
- If the inner element can have a fixed height, you can make its position
How to vertically align an image inside a div
The only (and the best cross-browser) way as I know is to use an inline-block
helper with height: 100%
and vertical-align: middle
on both elements.
So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/
.frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; white-space: nowrap; /* This is required unless you put the helper span closely near the img */
text-align: center; margin: 1em 0;}
.helper { display: inline-block; height: 100%; vertical-align: middle;}
img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px;}
<div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /></div><div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=17px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=15px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=13px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=11px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=9px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=7px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=5px /></div><div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=3px /></div>
How can I vertically center a div element for all browsers using CSS?
Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari.
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/* Whatever width you want */
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
How to center an element horizontally and vertically
Approach 1 -
transform
translateX
/translateY
:Example Here / Full Screen Example
In supported browsers (most of them), you can use
top: 50%
/left: 50%
in combination withtranslateX(-50%) translateY(-50%)
to dynamically vertically/horizontally center the element.
.container { position: absolute; top: 50%; left: 50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);}
<div class="container"> <span>I'm vertically/horizontally centered!</span></div>
How do I vertically align text in a div?
The correct way to do this in modern browsers is to use Flexbox.
See this answer for details.
See below for some older ways that work in older browsers.
Vertical Centering in CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Article summary:
For a CSS 2 browser, one can use display:table
/display:table-cell
to center content.
A sample is also available at JSFiddle:
div { border:1px solid green;}
<div style="display: table; height: 400px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle;">
<div>
everything is vertically centered in modern IE8+ and others.
</div>
</div>
</div>
How do I vertically center text with CSS?
You can try this basic approach:
div { height: 100px; line-height: 100px; text-align: center; border: 2px dashed #f69c55;}
<div> Hello World!</div>
Vertical Align Center in Bootstrap 4
Important! Vertical center is relative to the height of the parent
If the parent of the element you're trying to center has no defined
height, none of the vertical centering solutions will work!
Now, onto vertical centering...
Bootstrap 5 (Updated 2021)
Bootstrap 5 is still flexbox based so vertical centering works the same way as Bootstrap 4. For example, align-items-center
, justify-content-center
or auto margins can used on the flexbox parent (row
or d-flex
).
- use
align-items-center
on a flexbox row parent (row
ord-flex
) - use
justify-content-center
on a flexbox column parent (d-flex flex-column
) - use
my-auto
on a flexbox parent
Vertical Center in Bootstrap 5
Bootstrap 4
You can use the new flexbox & size utilities to make the container
full-height and display: flex
. These options don't require extra CSS (except that the height of the container (ie:html,body) must be 100%).
Option 1 align-self-center
on flexbox child
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
</div>
https://codeply.com/go/fFqaDe5Oey
Option 2 align-items-center
on flexbox parent (.row
is display:flex; flex-direction:row
)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
I'm vertically centered
</div>
</div>
</div>
</div>
https://codeply.com/go/BumdFnmLuk
Option 3 justify-content-center
on flexbox parent (.card
is display:flex;flex-direction:column
)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
...card content...
</div>
</div>
</div>
</div>
</div>
https://codeply.com/go/3gySSEe7nd
More on Bootstrap 4 Vertical Centering
Now that Bootstrap 4 offers flexbox and other utilities, there are many approaches to vertical
alignment. http://www.codeply.com/go/WG15ZWC4lf
1 - Vertical Center Using Auto Margins:
Another way to vertically center is to use my-auto
. This will center the element within it's container. For example, h-100
makes the row full height, and my-auto
will vertically center the col-sm-12
column.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Vertical Center Using Auto Margins Demo
my-auto
represents margins on the vertical y-axis and is equivalent to:
margin-top: auto;
margin-bottom: auto;
2 - Vertical Center with Flexbox:
Since Bootstrap 4 .row
is now display:flex
you can simply use align-self-center
on any column to vertically center it...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
or, use align-items-center
on the entire .row
to vertically center align all col-*
in the row...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Vertical Center Different Height Columns Demo
See this Q/A to center, but maintain equal height
3 - Vertical Center Using Display Utils:
Bootstrap 4 has display utils that can be used for display:table
, display:table-cell
, display:inline
, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Vertical Center Using Display Utils Demo
More examples
Vertical center image in <div>
Vertical center .row in .container
Vertical center and bottom in <div>
Vertical center child inside parent
Vertical center full screen jumbotron
Important! Did I mention height?
Remember vertical centering is relative to the height of the parent element. If you want to center on the entire page, in most cases, this should be your CSS...
body,html {
height: 100%;
}
Or use min-height: 100vh
(min-vh-100
in Bootstrap 4.1+) on the parent/container. If you want to center a child element inside the parent. The parent must have a defined height.
Also see:
Vertical alignment in bootstrap 4
Bootstrap Center Vertical and Horizontal Alignment
How can I center text (horizontally and vertically) inside a div block?
If it is one line of text and/or image, then it is easy to do. Just use:
text-align: center;
vertical-align: middle;
line-height: 90px; /* The same as your div height */
That's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/. Look for "vertical align".
Since they tend to be hacks or adding complicated divs... I usually use a table with a single cell to do it... to make it as simple as possible.
Update for 2020:
Unless you need make it work on earlier browsers such as Internet Explorer 10, you can use flexbox. It is widely supported by all current major browsers. Basically, the container needs to be specified as a flex container, together with centering along its main and cross axis:
#container {
display: flex;
justify-content: center;
align-items: center;
}
To specify a fixed width for the child, which is called a "flex item":
#content {
flex: 0 0 120px;
}
Example: http://jsfiddle.net/2woqsef1/1/
To shrink-wrap the content, it is even simpler: just remove the flex: ...
line from the flex item, and it is automatically shrink-wrapped.
Example: http://jsfiddle.net/2woqsef1/2/
The examples above have been tested on major browsers including MS Edge and Internet Explorer 11.
One technical note if you need to customize it: inside of the flex item, since this flex item is not a flex container itself, the old non-flexbox way of CSS works as expected. However, if you add an additional flex item to the current flex container, the two flex items will be horizontally placed. To make them vertically placed, add the flex-direction: column;
to the flex container. This is how it works between a flex container and its immediate child elements.
There is an alternative method of doing the centering: by not specifying center
for the distribution on the main and cross axis for the flex container, but instead specify margin: auto
on the flex item to take up all extra space in all four directions, and the evenly distributed margins will make the flex item centered in all directions. This works except when there are multiple flex items. Also, this technique works on MS Edge but not on Internet Explorer 11.
Update for 2016 / 2017:
It can be more commonly done with transform
, and it works well even in older browsers such as Internet Explorer 10 and Internet Explorer 11. It can support multiple lines of text:
position: relative;
top: 50%;
transform: translateY(-50%);
Example: https://jsfiddle.net/wb8u02kL/1/
To shrink-wrap the width:
The solution above used a fixed width for the content area. To use a shrink-wrapped width, use
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Example: https://jsfiddle.net/wb8u02kL/2/
If the support for Internet Explorer 10 is needed, then flexbox won't work and the method above and the line-height
method would work. Otherwise, flexbox would do the job.
Related Topics
Cannot Change Font Size of Text Field in Material Ui
Make Nested Div Stretch to 100% of Remaining Container Div Height
How to Have Multiple Background Images Using Css
Complex CSS Selector For Parent of Active Child
How to Add Fonts to Create-React-App Based Projects
Change a Html5 Input'S Placeholder Color With Css
Css Customized Scroll Bar in Div
How to Place Two Divs Next to Each Other
Floating Elements Within a Div, Floats Outside of Div. Why
How to Get Div Height to Auto-Adjust to Background Size
How to Make a Child Div'S Width Wider Than the Parent Div Using Css
Child Inside Parent With Min-Height: 100% Not Inheriting Height
How to Make a Floated Div 100% Height of Its Parent
Canvas Has White Space At the Bottom and Scrolls Too Far
Border-Radius in Percentage (%) and Pixels (Px) or Em
How to Hover Over One Element and Affect a Different Element
Amazon S3 Cors (Cross-Origin Resource Sharing) and Firefox Cross-Domain Font Loading