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 with translateX(-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 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 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/
HTML-CSS Center Text horizontally and vertically in a link
remove everything else, and just replace height
with line-height
a:link.Kachel{
width: 200px;
line-height: 200px;
display: block;
text-align: center;
background: #383838;
}
jsfiddle: http://jsfiddle.net/6jSFY/
How to center text vertically and horizontally in responsive container
JSFiddle
Explanation:
CSS:
span
{
position: absolute; /* this makes the text able to be placed over the image without getting pushed over */
width: 100%; /*set to 100% so text-align will fall in the center of the image*/
text-align: center; /*text will be horizontally centered in the image*/
color: white; /*purely aesthetic*/
}
img
{
width: 100%; /* The image is set to 100% to take up the container and be responsive */
}
Javascript:
I used a jQuery plugin called Flex Vertical Center (also available in vanilla javascript) to vertically center the <span>
, as CSS can be impossibly bothersome.
After including the javascript source in the HTML, the following code was simple call to the function:
$('span').flexVerticalCenter();
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>
How to center text vertically in a heading?
The following solutions work for both single or multi-lined text.
1. Flexbox:
h1 {
width: 200px;
height: 200px;
margin: 0;
background-color: gray;
color: white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
<h1>A quick brown fox</h1>
How do I center text vertically and horizontally in Flutter?
Text alignment center property setting only horizontal alignment.
I used below code to set text vertically and horizontally center.
Code:
child: Center(
child: Text(
"Hello World",
textAlign: TextAlign.center,
),
),
Related Topics
Special Character Not Displaying as Expected
How to Use <Section> and <Article> Tags in HTML5
Extra Space When Centering Elements Using Flexbox
How to Add HTML Code to Jsf Facesmessage
How to Put Img Inline with Text
Making a Flex Item Float Right
Drop Down Menu/Text Field in One
Do You Need to Close Meta and Link Tags in HTML
Is Any Way That Is Safe to Display Videos in a Browser
How to Prevent Text from Overflowing in CSS
How to Prevent Browser from Caching Form Fields
Transition for Background-Image in Firefox
<A Href> Appends Link to End of Current Url
Border Around Tr Element Doesn't Show
Difference Between Classes and Ids in CSS? Explain with Example of Where to Use
How to Create a Fixed Sidebar Layout with Bootstrap 4
Does Svg Xmlns Attribute Value Requires Protocol? Can It Be Https or Relative