Twitter Bootstrap - how to center elements horizontally or vertically

Question

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

User · Answer

You may directly write into your css file like this :

_x000D_

.content {_x000D_
  position: absolute;_x000D_
  top: 50%;_x000D_
  left:50%;_x000D_
  transform: translate(-50%,-50%);_x000D_
  }

_x000D_

<div class = "content" >_x000D_
  _x000D_
   <p> some text </p>_x000D_
  </div>

_x000D_

User · Answer

From the Bootstrap documentation      Set an element to display  block and center via margin  Available as a mixin and class     lt div class  center-block  gt     lt  div gt

User · Answer

bootstrap 4   Flex solve this   you can use    x000D   x000D   lt div class  d-flex justify-content-center align-items-center  gt  x000D       lt button type  submit  class  btn btn-primary  gt Create lt  button gt  x000D   lt  div gt  x000D   x000D   x000D    it should center centent horizontaly and verticaly

User · Answer

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

User · Answer

Updated 2018  In Bootstrap 4  the centering methods have changed    Horizontal Center in BS4   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 171456

User · Answer

With bootstrap 4 you can use flex   lt div class  d-flex justify-content-center align-items-center  gt       lt button type  submit  class  btn btn-primary  gt Create lt  button gt   lt  div gt    source  bootstrap 4 1

User · Answer

Update  while this answer was likely correct back in early 2013  it should not be used anymore  The proper solution uses offsets     As for other users suggestion there are also native bootstrap classes available like   class  text-center  class  pagination-centered    thanks to  Henning and  trejder

User · Answer

I like this solution from a similar question  https   stackoverflow com a 25036303 2364401 Use bootstraps text-center class on the actual table data  lt td gt  and table header  lt th gt  elements  So   lt td class  text-center  gt Cell data lt  td gt   and   lt th class  text-center  gt Header cell data lt  th gt

User · Answer

for horizontaly centering you can have something like this    centering  float none  margin 0 auto      lt div class  span8 centering  gt  lt  div gt

User · Answer

for bootstrap4 vertical center of few items  d-flex for flex rules  flex-column for vertical direction on items  justify-content-center for centering  style  height  300px   must have for set points where center be calc or use h-100 class   lt div class  d-flex flex-column justify-content-center bg-secondary  style       height  300px    gt       lt div class  p-2 bg-primary  gt Flex item lt  div gt       lt div class  p-2 bg-primary  gt Flex item lt  div gt       lt div class  p-2 bg-primary  gt Flex item lt  div gt     lt  div gt

User · Answer

For future visitors to this question  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  lt div class  quot col-sm-4 text-center quot  gt       lt img class  quot img-responsive text-center quot  src  quot myPic jpg quot    gt   lt  div gt   The img-responsive class adds a display block instruction to the image tag  which stops text-align center  text-center class  from working  SOLUTION   lt div class  quot col-sm-4 quot  gt       lt img class  quot img-responsive center-block quot  src  quot myPic jpg quot    gt   lt  div gt   jsFiddle of the 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  Update  Also  you should know the basics of flexbox and how to use it  since Bootstrap4 now uses it natively  Here is an excellent  fast-paced video tutorial by Brad Schiff Here is a great cheat sheet

User · Answer

i use this    lt style gt      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         lt  style gt   lt body gt       lt div class  container-fluid  gt           lt div class  row-fluid  gt               lt div class  offset3 span6 centering  gt                  content here              lt  div gt           lt  div gt       lt  div gt   lt  body gt

[css] Twitter Bootstrap - how to center elements horizontally or vertically

Examples related to css

Examples related to twitter-bootstrap