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.
Centering text vertically and horizontally in a div
Making text central is fairly trivial, the easiest approach is as follows. You can check out the jsFiddle too: https://jsfiddle.net/jL9bs0j7/
.text-container {
height:200px;
width:400px;
border: 1px solid #000;
text-align: center;
}
.text-container span {
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="text-container">
<span>Hello World</span>
</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 to center text within a DIV vertically and horizontally
Try this:
<div class="bubble">
<p>blablabla</p>
</div>
.bubble {
position: absolute;
background: #cccccc;
width: 135px;
height: 84px;
display: table;
}
.bubble p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
here is a fiddle: http://jsfiddle.net/hLwzymmL/
How can I horizontally center an element?
You can apply this CSS to the inner <div>
:
#inner {
width: 50%;
margin: 0 auto;
}
Of course, you don't have to set the width
to 50%
. Any width less than the containing <div>
will work. The margin: 0 auto
is what does the actual centering.
If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:
#inner {
display: table;
margin: 0 auto;
}
It will make the inner element center horizontally and it works without setting a specific width
.
Working example here:
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Centrer align p vertically and horizontally inside a div
Try this once.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.loading {
position:absolute; /* or fixed */
background-color:rgba(0,0,0,0.6); /* to your preference */
width:100%;
height:100%;
top:0; left:0; bottom:0; right:0; /* not always necessary */
text-align:center;
display: table;
}
.loading p {
color:#fff;
font-size:25px;
text-align:center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="loading" id="divProcessing">
<p>Cargando códigos, por favor espere . . . <img src="~/Content/images/ripple.gif"></p>
</div>
</body>
</html>
Vertically align text within a div
Create a container for your text content, a span
perhaps.
#column-content {
display: inline-block;
}
img {
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
}
/* for visual purposes */
#column-content {
border: 1px solid red;
position: relative;
}
<div id="column-content">
<img src="http://i.imgur.com/WxW4B.png">
<span><strong>1234</strong>
yet another text content that should be centered vertically</span>
</div>
How do I vertically and horizontally center text in a container in bootstrap 4?
It is very easy makes the parent div as display: flex
and make the child element margin: auto;
Check the demo below.
#outer {
width: 100%;
height: 100vh;
display: flex;
}
#inner {
margin: auto;
}
<div id="outer" class="container">
<div id="inner">
<h1>Heading</h1>
<p>Some content</p>
</div>
</div>
Related Topics
How to Apply a Fade Away Effect (Not Animation) Across All the Content of a Div
Aligning Elements in Last Flexbox Row
How to Select an Element That Has an Id Which Begins with a Digit
How to Indent All Text in a Paragraph Except the First Line
Font-Family Is Not Inherited to the Form Input Fields
Set Margin/Padding for Each Page to Print (Html/Css)
Why Won't Tabindex Work with Firefox
Why Does Firefox Not Honor CSS Font-Size for Code Tags Wrapped in Pre
Skew Background Image on One Side with a Border
What Formatting Context Applies to Elements That Don't Create Their Own
HTML CSS Positions Not Working
How to Make a 2 Column Layout Where Items Starts from Top to Bottom (Not Left to Right)
How to Get a Div Centered with Another Div on the Right of It
How to Change the Selected Text Color in Internet Explorer
Absolute Positioning Ignoring Padding
Scope External CSS File for Div(No CSS File Should Link Only )