I have a div set to display:block (90px height and width), and I have some text inside.
I need the text to be aligned in the center both vertically and horizontally.
I have tried text-align:center, but it doesn't do the horizontal part, so I tried vertical-align:middle, but it didn't work.
Any ideas?
The answer is
Really simple code that works for me! Just one line and your text will be centered horizontally.
.center-horizontally{
justify-content: center;
}
<Card.Footer className="card-body-padding center-horizontally">
<label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>
The output looks like this:
Please vote this answer if it works for just to spare some time of devs looking for easy solutions. Thanks! :)
Adjusting line height to get the vertical alignment.
line-height: 90px;
You can use the flex property at the parent div and add the margin:auto property to the children items:
.parent {
display: flex;
/* You can change this to `row` if you want the items side by side instead of stacked */
flex-direction: column;
}
/* Change the `p` tag to what your items child items are */
.parent p {
margin: auto;
}
You can see more options of flex here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
GRID
.center {
display: grid;
justify-items: center;
align-items: center;
}
.center {_x000D_
display: grid;_x000D_
justify-items: center;_x000D_
align-items: center;_x000D_
}_x000D_
_x000D_
.box {_x000D_
width: 200px;_x000D_
height: 100px;_x000D_
background: red;_x000D_
}<div class="box center">My text</div>This worked for me:
.center-stuff{
text-align: center;
vertical-align: middle;
line-height: 230px; /* This should be the div height */
}
Try the following example. I have added examples for each category: horizontal and vertical
<!DOCTYPE html>
<html>
<head>
<style>
#horizontal
{
text-align: center;
}
#vertical
{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div id ="horizontal">Center horizontal text</div>
<div id ="vertical">Center vertical text</div>
</body>
</html>
# Parent
{
display:table;
}
# Child
{
display: table-cell;
width: 100%; // As large as its parent to center the text horizontally
text-align: center;
vertical-align: middle; // Vertically align this element on its parent
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style ="text-align: center;">Center horizontal text</div>
<div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
</body>
</html>
This should be the right answer. Cleanest and simplest:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
This works for me (tested OK!):
HTML:
<div class="mydiv">
<p>Item to be centered!</p>
</div>
CSS:
.mydiv {
height: 100%; /* Or other */
position: relative;
}
.mydiv p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%); /* To compensate own width and height */
}
You can choose other values than 50%. For example, 25% to center at 25% of parent.
Apply style:
position: absolute;
top: 50%;
left: 0;
right: 0;
Your text would be centered irrespective of its length.
Add the line display: table-cell; to your CSS content for that div.
Only table cells support the vertical-align: middle;, but you can give that [table-cell] definition to the div...
A live example is here: http://jsfiddle.net/tH2cc/
div{
height: 90px;
width: 90px;
text-align: center;
border: 1px solid silver;
display: table-cell; // This says treat this element like a table cell
vertical-align:middle; // Now we can center vertically like in a TD
}
Common techniques as of 2014:
Approach 1 -
transformtranslateX/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%; transform: translateX(-50%) translateY(-50%); }
Approach 2 - Flexbox method:
Example Here / Full Screen Example
In supported browsers, set the
displayof the targeted element toflexand usealign-items: centerfor vertical centering andjustify-content: centerfor horizontal centering. Just don't forget to add vendor prefixes for additional browser support (see example).html, body, .container { height: 100%; } .container { display: flex; align-items: center; justify-content: center; }
Approach 3 -
table-cell/vertical-align: middle:Example Here / Full Screen Example
In some cases, you will need to ensure that the
html/bodyelement's height is set to100%.For vertical alignment, set the parent element's
width/heightto100%and adddisplay: table. Then for the child element, change thedisplaytotable-celland addvertical-align: middle.For horizontal centering, you could either add
text-align: centerto center the text and any otherinlinechildren elements. Alternatively, you could usemargin: 0 autoassuming the element isblocklevel.html, body { height: 100%; } .parent { width: 100%; height: 100%; display: table; text-align: center; } .parent > .child { display: table-cell; vertical-align: middle; }
Approach 4 - Absolutely positioned
50%from the top with displacement:Example Here / Full Screen Example
This approach assumes that the text has a known height - in this instance,
18px. Just absolutely position the element50%from the top, relative to the parent element. Use a negativemargin-topvalue that is half of the element's known height, in this case --9px.html, body, .container { height: 100%; } .container { position: relative; text-align: center; } .container > p { position: absolute; top: 50%; left: 0; right: 0; margin-top: -9px; }
Approach 5 - The
line-heightmethod (Least flexible - not suggested):In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a
line-heightvalue on the child element equal to the fixed height of the parent element.Though this solution will work in some cases, it's worth noting that it won't work when there are multiple lines of text - like this.
.parent { height: 200px; width: 400px; text-align: center; } .parent > .child { line-height: 200px; }
Methods 4 and 5 aren't the most reliable. Go with one of the first 3.
You can try the following methods:
If you have a single word or one line sentence, then the following code can do the trick.
Have a text inside a div tag and give it an id. Define the following properties for that id.
id-name { height: 90px; line-height: 90px; text-align: center; border: 2px dashed red; }Note: Make sure the line-height property is same as the height of the division.
But, if the content is more than one single word or a line then this doesn’t work. Also, there will be times when you cannot specify the size of a division in px or % (when the division is really small and you want the content to be exactly in the middle).
To solve this issue, we can try the following combination of properties.
id-name { display: flex; justify-content: center; align-items: center; border: 2px dashed red; }These 3 lines of code sets the content exactly in the middle of a division (irrespective of the size of the display). The "align-items: center" helps in vertical centering while "justify-content: center" will make it horizontally centered.
Note: Flex does not work in all browsers. Make sure you add appropriate vendor prefixes for additional browser support.
<div class="small-container">
<span>Text centered</span>
</div>
<style>
.small-container {
width:250px;
height:250px;
border:1px green solid;
text-align:center;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.small-container span{
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
</style>
div {_x000D_
height: 90px;_x000D_
line-height: 90px;_x000D_
text-align: center;_x000D_
border: 2px dashed #f69c55;_x000D_
}<div>_x000D_
Hello, World!!_x000D_
</div>I always use the following CSS for a container, to center its content horizontally and vertically.
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
See it in action here: https://jsfiddle.net/yp1gusn7/
<!DOCTYPE html>
<html>
<head>
<style>
.maindiv {
height: 450px;
background: #f8f8f8;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<div class="maindiv">
<h1>Title</h1>
</div>
</body>
</html>
Approach 1
div {_x000D_
height: 90px;_x000D_
line-height: 90px;_x000D_
text-align: center;_x000D_
border: 2px dashed #f69c55;_x000D_
}<div>_x000D_
Hello, World!!_x000D_
</div>Approach 2
div {_x000D_
height: 200px;_x000D_
line-height: 200px;_x000D_
text-align: center;_x000D_
border: 2px dashed #f69c55;_x000D_
}_x000D_
span {_x000D_
display: inline-block;_x000D_
vertical-align: middle;_x000D_
line-height: normal;_x000D_
}<div>_x000D_
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>_x000D_
</div>Approach 3
div {_x000D_
display: table;_x000D_
height: 100px;_x000D_
width: 100%;_x000D_
text-align: center;_x000D_
border: 2px dashed #f69c55;_x000D_
}_x000D_
span {_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
}<div>_x000D_
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>_x000D_
</div>Give this CSS class to the targeted <div>:
.centered {_x000D_
width: 150px;_x000D_
height: 150px;_x000D_
display: flex;_x000D_
align-items: center;_x000D_
justify-content: center;_x000D_
text-align: center;_x000D_
background: red; /* Not necessary just to see the result clearly */_x000D_
}<div class="centered">This text is centered horizontally and vertically</div>Using flexbox/CSS:
<div class="box">
<p>അ</p>
</div>
The CSS:
.box{
display: flex;
justify-content: center;
align-items: center;
}
Taken from Quick Tip: The Simplest Way To Center Elements Vertically And Horizontally
You can try very easy code for this:
display: flex;
align-items: center;
justify-content: center;
.box{_x000D_
height: 90px;_x000D_
width: 90px;_x000D_
background: green;_x000D_
display: flex;_x000D_
align-items: center;_x000D_
justify-content: center;_x000D_
}<div class="box">_x000D_
Lorem_x000D_
</div>Codepen link: http://codepen.io/santoshkhalse/pen/xRmZwr
2020 Way
.parent{
display: grid;
place-items: center;
}
For me this was the best solution:
HTML:
<div id="outer">
<img src="logo.png">
</div>
CSS:
#outer {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
Add the following code in the parent div
display: grid;
place-items: center;
.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}_x000D_
.cell {display: table-cell}_x000D_
.cell-middle {vertical-align: middle}<div class="cell-row">_x000D_
<div class="cell cell-middle">Center</div>_x000D_
</div>Source: Stackoverflow.com