Is there any way to center html elements vertically or horizontally inside the main parents?
13 Answers
Update: while this answer was likely correct back in early 2013, it should not be used anymore. The proper solution uses offsets, like so:
class="mx-auto"
As for other users suggestion there are also native bootstrap classes available like:
class="text-center"
class="pagination-centered"
-
3Using
text-center
for layout is very bad practice. The proper way to align columns in Bootstrap is by usingcol-XX-offset-Y
classes. getbootstrap.com/css/#grid-offsetting. This answer was likely right in 2013 but should not be used anymore today. Oct 12, 2016 at 21:44
From the Bootstrap documentation:
Set an element to
display: block
and center viamargin
. Available as a mixin and class.
<div class="center-block">...</div>
If you are trying to center an image in a div, but the image won't center, this could describe your problem:
<div class="col-sm-4 text-center">
<img class="img-responsive text-center" src="myPic.jpg" />
</div>
The img-responsive
class adds a display:block
instruction to the image tag, which stops text-align:center
(text-center
class) from working.
SOLUTION:
<div class="col-sm-4">
<img class="img-responsive center-block" src="myPic.jpg" />
</div>
Adding the center-block
class overrides the display:block
instruction put in by using the img-responsive
class. Without the img-responsive
class, the image would center just by adding text-center
class
Also, you should know the basics of flexbox and how to use it, since Bootstrap 4 now uses it natively.
Here is an excellent, fast-paced video tutorial by Brad Schiff
Here is a great cheat sheet
In Bootstrap 4, the centering methods have changed.
Horizontal Center in Bootstrap 4
text-center
is still used fordisplay:inline
elementsmx-auto
replacescenter-block
to centerdisplay:flex
childrenoffset-*
ormx-auto
can be used to center grid columns
mx-auto
(auto x-axis margins) will center display:block
or display:flex
elements that have a defined width, (%
, vw
, px
, etc..). Flexbox is used by default on grid columns, so there are also various flexbox centering methods.
Demo Bootstrap 4 Horizontal Centering
For vertical centering in BS4 see https://stackoverflow.com/a/41464397
You may directly write into your CSS file like this:
.content {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
<div class = "content" >
<p> some text </p>
</div>
-
1This seems to ignore the fact that this is a Bootstrap question, so interested users will almost certainly have other Bootstrap-specific classes which cause this not to work.– TylerHDec 16, 2021 at 16:57
i use this
<style>
html, body {
height: 100%;
margin: 0;
padding: 0 0;
}
.container-fluid {
height: 100%;
display: table;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.row-fluid {
height: 100%;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.centering {
float: none;
margin: 0 auto;
}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>
-
2Doesn't work in certain cases (see comment on essentially the same answer and doesn't make use of Bootstrap-specific classes for centering. Oct 7, 2014 at 3:25
for horizontaly centering you can have something like this:
.centering{
float:none;
margin:0 auto
}
<div class="span8 centering"></div>
-
5Does not work (at least not in current implementation), when directly used in an image:
<img src="img/logo.png" style="float:none; margin:0 auto" />
. Surroundingimg
with parentdiv
and giving.text-center
or.pagination-centered
class to parent works like a charm.– trejderMay 28, 2013 at 10:56 -
3to center an element with margin:0 auto, you need to add a width to that element. In the above example there is no width specified because span8 has a width in boobstrap but your image doesn't so <img src="img/logo.png" style="float:none; margin:0 auto; width:300px" /> will center horizontally that image inside the parent– RaulOct 25, 2013 at 4:37
-
4
With Bootstrap 4 you can use flex-based HTML classes d-flex
, justify-content-center
, and align-items-center
:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>
Source: Bootstrap 4.1
-
The only suggestion that worked for me when trying to align "export" button os jQuery datatable. +1 Mar 4, 2022 at 17:50
I like this solution from a similar question:
Use bootstrap's
text-center
class on the actual table data<td>
and table header<th>
elements. So
<td class="text-center">Cell data</td>
and<th class="text-center">Header cell data</th>
I discovered in Bootstrap 4 you can do this:
center horizontal is indeed text-center
class
center vertical however using bootstrap classes is adding both mb-auto mt-auto
so that margin-top and margin bottom are set to auto.
-
text-center
worked for me. I was trying to center a button in amd-12
div Oct 27, 2020 at 6:59 -
Bootstrap 4's use of flex properties solve this. You can use these classes:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>
These classes will center your content horizontally and vertically.
for bootstrap4 vertical center of few items
d-flex for flex rules
flex-column for vertical direction on items
align-items-center for horizontal centering
justify-content-center for vertical centering
style='height: 300px;' must have for set points where center be calc or use h-100 class
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column align-items-center justify-content-center bg-secondary" style="
height: 300px;
">
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-primary">Flex item</div>
</div>
-
-
edit answer for new version of bootstrap and add "run code snippet". my answer more correct. @TylerH run code snippet Dec 17, 2021 at 19:27
-