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 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.
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>
Centering text (horizontally and vertically) in nav
Try this https://jsfiddle.net/7qovrydb/
CSS
#page {
height: 100%;
width: 100%;
background-color: yellow;
padding: 1%;
background-image: url('images/background_image.jpg');
background-repeat: no-repeat;
}
#topNav {
border: 2px solid black;
border-radius: 8px;
margin-left: auto;
margin-right: auto;
width: 66%;
text-align: center;
background-size: cover;
background-position: bottom left;
background-repeat: no-repeat;
background-color: #22756B;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 2em;
}
nav a {
display: inline-block;
text-decoration: none;
color: white;
height: 100%;
font-size: 20px;
padding: 10px;
}
#topNav a:hover {
border-radius: 8px;
background-color: white;
color: black;
}
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 to center align text horizontally and VERTICALLY in a box/container?
You don't need to complicate stuff using FlexBox. Please use something like this, a table layout or line-height
and vertical-align
combination:
.download { font: Verdana, Helvetica, Arial, sans-serif; color: RGB(112, 112, 112); font-size: 18px; text-align: center; padding: 5px;}
.download:hover { color: rgb(227, 111, 30); cursor: pointer;}
#download-icon { font-size: 80px; vertical-align: middle; line-height: 120px;}
#download-icon + span { vertical-align: middle; line-height: 1;}
.container-border { border-style: solid; border-color: rgb(0, 143, 197); padding: 5px; min-height: 120px;}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><div class="container"> <div class="row"> <div class="col-xs-4"> <div class="container-border"> <i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i> <span class="download"> Download list of charities that have <b> not submitted </b> data yet </span> </div> </div> </div></div>
Vertical and Horizontal alignment of text with CSS
You can change just your CSS to this (no HTML changes):
div{
background: red;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
text-align: center;
line-height: 100px;
}
The text-align
is self-explanatory. The line-height
forces the text to the center by matching the height of a single line to that of the div. You will have to adjust it to your needs each time.
JSFiddle
How to align text inside table thead to center horizontally and vertically
Add the bootstrap class align-middle
and text-center
to the th
elements.
Bootstrap Vertical alignment also Bootstrap Text alignment
th:nth-of-type(1),
th:nth-of-type(4),
th:nth-of-type(5),
th:nth-of-type(8){
min-width: 150px;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table id="stanari" class="table table-striped table-bordered w-100 animate__animated animate__fadeIn">
<thead>
<tr>
<th class="align-middle text-center">First name and last name of tenants</th>
<th class="align-middle text-center">Cell phone of tenants</th>
<th class="align-middle text-center">Apartment address</th>
<th class="align-middle text-center">Number at the door of the apartment</th>
<th class="align-middle text-center">Paid deposit in euros</th>
<th class="align-middle text-center">Date of tenants registration</th>
<th class="align-middle text-center">Monthly rent in euros</th>
<th class="align-middle text-center">Is the monthly rent paid</th>
<th class="align-middle text-center">Payment date</th>
<th class="align-middle text-center">For month</th>
<th class="align-middle text-center"></th>
</tr>
<tr>
<td class="align-middle text-center col-3">John and Jane Doe</td>
<td class="align-middle text-center">555-555-5555</td>
<td class="align-middle text-center">5555 Someroad streer</td>
<td class="align-middle text-center">555</td>
<td class="align-middle text-center">1555 Euro</td>
<td class="align-middle text-center">5-5-21</td>
<td class="align-middle text-center">2555 Euro</td>
<td class="align-middle text-center">Paid in full</td>
<td class="align-middle text-center">5-1-21</td>
<td class="align-middle text-center">May</td>
<td class="align-middle text-center">N/A</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
Bootstrap Center Vertical and Horizontal Alignment
Bootstrap 5 (Updated 2021)
Bootstrap 5 is still flexbox based so vertical centering works the same way as it did in Bootstrap 4. For example, align-items-center
(flex-direction: row) and justify-content-center
(flex-direction: column) can used on the flexbox parent (row or d-flex).
Centering examples in Bootstrap 5
Vertical center (don't forget the parent must have a defined height!):
my-auto
for centering inside flex (.d-flex
) elementsmy-auto
can be used to center columns (.col-
) insiderow
align-items-center
to center columns (col-*
) insiderow
Horizontal center:
text-center
to centerdisplay:inline
elements & column contentmx-auto
for centering inside flex elementsmx-auto
can be used to center columns (.col-
) insiderow
justify-content-center
to center columns (col-*
) insiderow
Bootstrap 4.3+ (Update 2019)
There's no need for extra CSS. What's already included in Bootstrap will work. Make sure the container(s) of the form are full height. Bootstrap 4 now has a h-100
class for 100% height...
Vertical center:
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<form class="col-12">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
https://codeply.com/go/raCutAGHre
the height of the container with the item(s) to center should be 100%
(or whatever the desired height is relative to the centered item)
Note: When using height:100%
(percentage height) on any element, the element takes in the height of it's container. In modern browsers vh units height:100vh;
can be used instead of %
to get the desired height.
Therefore, you can set html, body {height: 100%}, or use the new min-vh-100
class on container instead of h-100
.
Horizontal center:
text-center
to centerdisplay:inline
elements & column contentmx-auto
for centering inside flex elementsoffset-*
ormx-auto
can be used to center columns (.col-
)justify-content-center
to center columns (col-*
) insiderow
Vertical Align Center in Bootstrap
Bootstrap 4 full-screen centered form
Bootstrap 4 center input group
Bootstrap 4 horizontal + vertical center full screen
Related Topics
Why Doesn't CSS-Calc() Work When Using 0 Inside the Equation
Animate Text Fill from Left to Right
How to Dynamically Load a CSS File into a Flex Application
How to Provide CSS Properties for Different Browsers Like Mozilla and Chrome
Clear Fix and Uncollapse Margins with CSS Without Side Effects
Ie Flexible Box Model Not Working
Less: Extend a Previously Defined Nested Selector
How to Target CSS Class Names That Start with Digit
CSS Variables - Swapping Values
Why Can't I Beat an Id with Multiple Classes
React: How to Make an Input Only as Wide as the Amount of Text Provided
Variable Sized Column with Ellipsis in a Table
CSS Border-Width:1Px Doesn't Give Me Equally Thin Borders