301

Is there any way to center html elements vertically or horizontally inside the main parents?

13 Answers 13

259

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"
1
  • 3
    Using text-center for layout is very bad practice. The proper way to align columns in Bootstrap is by using col-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
78

From the Bootstrap documentation:

Set an element to display: block and center via margin. Available as a mixin and class.

<div class="center-block">...</div>
0
56

If you are trying to center an image in a div, but the image won't center, this could describe your problem:

JSFiddle Demo of the 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>

JSFiddle demo of solution

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

0
37

In Bootstrap 4, the centering methods have changed.

Horizontal Center in Bootstrap 4

  • text-center is still used for display:inline elements
  • mx-auto replaces center-block to center display:flex children
  • offset-* or mx-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

0
31

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>

1
  • 1
    This 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.
    – TylerH
    Dec 16, 2021 at 16:57
9

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>
1
8

for horizontaly centering you can have something like this:

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>
3
  • 5
    Does 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" />. Surrounding img with parent div and giving .text-center or .pagination-centered class to parent works like a charm.
    – trejder
    May 28, 2013 at 10:56
  • 3
    to 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
    – Raul
    Oct 25, 2013 at 4:37
  • 4
    This ignores the "Bootstrap" part of the question. Oct 7, 2014 at 3:24
8

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

1
  • The only suggestion that worked for me when trying to align "export" button os jQuery datatable. +1
    – NoBullMan
    Mar 4, 2022 at 17:50
5

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>

2

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.

2
  • text-center worked for me. I was trying to center a button in a md-12 div Oct 27, 2020 at 6:59
  • This appears to just repeat existing answers.
    – TylerH
    Dec 16, 2021 at 16:45
2

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.

1
  • This repeats the answer from alvseek over a year prior.
    – TylerH
    Dec 16, 2021 at 16:40
0

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>

3
  • This repeats existing answer by alvseek nearly a year prior.
    – TylerH
    Dec 16, 2021 at 16:45
  • 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
  • difference is class d-column Dec 17, 2021 at 19:33
0

With Bootstrap 5 you can use my-auto to verticaly center inside a col

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.