How to center an element horizontally and vertically

Question

I am trying to center my tabs content vertically  but when I add the CSS style display inline-flex  the horizontal text-align disappears   How can I make both text alignments x and y for each of my tabs    x000D   x000D      box-sizing  border-box    x000D   leftFrame   x000D    background-color  green  x000D    position  absolute  x000D    left  0  x000D    right  60   x000D    top  0  x000D    bottom  0  x000D    x000D   leftFrame  tabs   x000D    background-color  red  x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    right  0  x000D    height  25   x000D    x000D   leftFrame  tabs div   x000D    border  2px solid black  x000D    position  static  x000D    float  left  x000D    width  50   x000D    height  100   x000D    text-align  center  x000D    display  inline-flex  x000D    align-items  center  x000D    x000D   lt div id leftFrame gt  x000D     lt div id tabs gt  x000D       lt div gt first lt  div gt  x000D       lt div gt second lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This should works     x000D   x000D   center-div   x000D      display  flex  x000D      flex-direction  column  x000D      justify-content  center  x000D      align-items  center  x000D      text-align  center  x000D      min-height  100vh  x000D    x000D   lt div class  center-div  gt Center Div lt  div gt  x000D   x000D   x000D

User · Answer

to center the Div in a page check the fiddle link   x000D   x000D   vh   x000D      border-radius  15px  x000D      box-shadow  0 0 8px rgba 0  0  0  0 4   x000D      padding  25px  x000D      width  200px  x000D      height  200px  x000D      background  white  x000D      text-align  center  x000D      margin  auto  x000D      position  absolute  x000D      top  0  x000D      left  0  x000D      bottom  0  x000D      right  0  x000D    x000D   lt div id  vh  gt Div to be aligned vertically lt  div gt  x000D   x000D   x000D    Update Another option is to use flex box  check the fiddle link   x000D   x000D   vh   x000D      background-color   ddd  x000D      height  200px  x000D      align-items  center  x000D      display  flex  x000D    x000D   vh  gt  div   x000D      width  100   x000D      text-align  center  x000D      vertical-align  middle  x000D    x000D   lt div class  vh  gt  x000D       lt div gt Div to be aligned vertically lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can achieve this using CSS  your element display inline-grid    grid-auto-flow  row    Grid and Flex Box   parent element display flex      See below snippet    x000D   x000D   leftFrame   x000D    display  flex  x000D    height  100vh  x000D    width  100   x000D    x000D   x000D   tabs   x000D    display  inline-grid  x000D    grid-auto-flow  row  x000D    grid-gap  24px  x000D    justify-items  center  x000D    margin  auto  x000D    x000D   x000D  html body   x000D    margin 0  x000D    padding 0  x000D    x000D   lt div gt  x000D   lt div id leftFrame gt  x000D     lt div id tabs gt  x000D       lt div gt first lt  div gt  x000D       lt div gt second lt  div gt          x000D     lt  div gt  x000D   lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D       align   x000D          display  flex  x000D          width  400px  x000D          height  400px  x000D          border  solid 1px black  x000D          align-items  center  x000D          justify-content  space-around  x000D        x000D       align div first-child   x000D          width  20px  x000D          height  20px  x000D          background-color  red  x000D          position  absolute   x000D        x000D       align div   x000D          width  20px  x000D          height  20px  x000D          background-color  blue  x000D        x000D       lt div class  align  gt  x000D           lt div gt  lt  div gt  x000D           lt div gt  lt  div gt  x000D           lt div gt  lt  div gt  x000D           lt div gt  lt  div gt  x000D           lt div gt  lt  div gt  x000D           lt div gt  lt  div gt  x000D       lt  div gt  x000D   x000D   x000D    First child will be aligned vertically and horizontally at center

User · Answer

If you prefer it without flexbox   grid   tableor without the  vertical-align  middle  You can do   HTML   lt div class  box  gt     lt h2 class  box label  gt square lt  h2 gt   lt  div gt    CSS   box     box-sizing  border-box    width  100px    height  100px    text-align  center    border  1px solid black      box label     box-sizing  border-box    display  inline-block    transform  translateY 50      text-align  center    border  1px solid black

User · Answer

The simplest flexbox approach   The easiest way how to center a single element vertically and horizontally is to make it a flex item and set its margin to auto      If you apply auto margins to a flex item  that item will automatically   extend its specified margin to occupy the extra space in the flex   container       x000D   x000D   flex-container   x000D    height  150px  x000D    display  flex  x000D    x000D   x000D   flex-item   x000D    margin  auto  x000D    x000D   lt div class  flex-container  gt  x000D     lt div class  flex-item  gt  x000D      This should be centered  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    This extension of margins in each direction will push the element exactly to the middle of its container

User · Answer

Need to follow following New and easy solution   x000D   x000D     centered-class   x000D        align-items  center  x000D        display  flex  x000D        justify-content  center  x000D        width  100vw  x000D        height  100vh  x000D        x000D   lt div class  centered-class  gt  x000D    I m in center vertically and horizontally  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The simplest and cleanest solution for me is using the CSS3 property  transform     x000D   x000D   container   x000D    position  relative  x000D    x000D   x000D   container a   x000D    position  absolute  x000D    top  50   x000D    transform  translate 0 -50    x000D    x000D   lt div class  container  gt  x000D     lt a href     gt Hello world  lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Another approach is to use table    x000D   x000D   lt div style  border 2px solid  8AC007  height 200px  width 200px   gt  x000D     lt table style  width 100   height 100   gt  x000D       lt tr style  height 100   gt  x000D         lt td style  height 100   text-align center  gt hello  multiple lines here  this is super long  and that is awesome  dude lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Source Link     Method 1  Display type flex   child-element       display  flex       justify-content  center       align-items  center          Method 2  2D Transform   child-element      top  50      left  50      transform  translate -50    -50       position  absolute       See other methods here

User · Answer

If CSS3 is an option  or you have a fallback  you can use transform    center       right  50       bottom  50       transform  translate 50  50        position  absolute      Unlike the first approach above  you don t want to use left 50  with the negative translation because there s an overflow bug in IE9   Utilize a positive right value and you won t see horizontal scrollbars

User · Answer

The best way to center a box both vertically and horizontally  is to use two containers     The outher container    should have display  table     The inner container    should have display  table-cell  should have vertical-align  middle  should have text-align  center     The content box    should have display  inline-block  should adjust the horizontal text-alignment  unless you want text to be centered    Demo    x000D   x000D  body       margin   0      outer-container       display  table      width  80       height  120px      background   ccc      inner-container       display  table-cell      vertical-align  middle      text-align  center      centered-content       display  inline-block      text-align  left      background   fff      padding   20px      border   1px solid  000    x000D   lt div class  outer-container  gt      lt div class  inner-container  gt        lt div class  centered-content  gt          Center this        lt  div gt      lt  div gt   lt  div gt  x000D   x000D   x000D   See also this Fiddle    Centering in the middle of the page  To center your content in the middle of your page  add the following to your outer container    position   absolute  width  100   height  100    Here s a demo for that    x000D   x000D  body       margin   0      outer-container       position   absolute      display  table      width  100       height  100       background   ccc      inner-container       display  table-cell      vertical-align  middle      text-align  center      centered-content       display  inline-block      text-align  left      background   fff      padding   20px      border   1px solid  000    x000D   lt div class  outer-container  gt      lt div class  inner-container  gt        lt div class  centered-content  gt          Center this        lt  div gt      lt  div gt   lt  div gt  x000D   x000D   x000D   See also this Fiddle

User · Answer

Grid css approach   x000D   x000D   wrapper   x000D      position  absolute  x000D      top  0  x000D      bottom  0  x000D      right  0  x000D      left  0  x000D      display  grid  x000D      grid-template-columns  repeat 3  1fr   x000D      grid-template-rows  repeat 3  1fr   x000D    x000D   main   x000D      background-color   444  x000D    x000D   lt div id  wrapper  gt  x000D       lt div class  box  gt  lt  div gt  x000D       lt div class  box  gt  lt  div gt  x000D       lt div class  box  gt  lt  div gt  x000D       lt div class  box  gt  lt  div gt  x000D       lt div class  box main  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Below is the Flex-box approach to get desired result   x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  gt  x000D     lt title gt Flex-box approach lt  title gt  x000D   lt style gt  x000D     tabs  x000D      display  -webkit-flex  x000D      display  flex  x000D      width  500px  x000D      height  250px  x000D      background-color  grey  x000D      margin  0 auto  x000D       x000D      x000D     f  x000D      width  200px  x000D      height  200px  x000D      margin  20px  x000D      background-color  yellow  x000D      margin  0 auto  x000D      display  inline    for vertically aligning    x000D      top  9             for vertically aligning    x000D      position  relative    for vertically aligning    x000D      x000D   lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D       lt div class  tabs  gt  x000D           lt div class  f  gt first lt  div gt  x000D           lt div class  f  gt second lt  div gt          x000D       lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This is a related problem that people might come to this page when searching  When I want to centre a div for a  100px square   waiting    animated gif I use       centreDiv           position  absolute          top  calc 50vh - 50px           top  -moz-calc 50vh - 50px           top  -webkit-calc 50vh - 50px           left  calc 50vw - 50px           left  -moz-calc 50vw - 50px           left  -webkit-calc 50vw - 50px           z-index  1000    whatever is required

User · Answer

Approach 6    x000D   x000D    Change units to       px  or whatever   x000D   x000D   wrapper  x000D    width  50   x000D    height  70vh  x000D    background  rgba 0 0 0  5   x000D    position  absolute  x000D    top  0  x000D    right  0  x000D    bottom  0  x000D    left  0  x000D    margin  auto  x000D    x000D   left  x000D    width  50   x000D    height  50vh  x000D    position  absolute  x000D    top  0  x000D    bottom  0  x000D    left  0  x000D    margin  auto  x000D    background  red  x000D    x000D   right  x000D    width  50   x000D    height  50vh  x000D    position  absolute  x000D    top  0  x000D    bottom  0  x000D    right  0  x000D    margin  auto  x000D    background  green  x000D    x000D   txt  x000D    text-align  center  x000D    line-height  50vh  x000D    x000D   lt div id  wrapper  gt  x000D      lt div id  left  class  txt  gt Left lt  div gt  x000D      lt div id  right  class  txt  gt Right lt  div gt  x000D   lt  div gt  x000D   x000D   x000D         container                  width  50      Your container width here                height  50     Your container height here                position  absolute                  top  0                  right  0                   bottom  0                  left  0                  margin  auto

User · Answer

Run this code snippet and see a vertically and horizontally aligned div    x000D   x000D  html  x000D  body  x000D   container   x000D    height  100   x000D    width  100   x000D    x000D   container   x000D    display  flex  x000D    align-items  center  x000D    justify-content  center  x000D    x000D   mydiv   x000D    width  80px  x000D    x000D   lt div class  container  gt  x000D     lt div class  mydiv  gt h  amp  v aligned lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

In order to vertically and horizontally center an element we can also use below mentioned properties   This CSS property aligns-items vertically and accepts the following values   flex-start  Items align to the top of the container   flex-end  Items align to the bottom of the container   center  Items align at the vertical center of the container   baseline  Items display at the baseline of the container   stretch  Items are stretched to fit the container   This CSS property justify-content   which aligns items horizontally and accepts the following values   flex-start  Items align to the left side of the container   flex-end  Items align to the right side of the container   center  Items align at the center of the container   space-between  Items display with equal spacing between them   space-around  Items display with equal spacing around them

User · Answer

The easiest way of centering a div both vertically and horizontally is as follows    x000D   x000D   lt div style  display  table  width  200px  height  200px  border  1px solid black   gt  x000D       lt div style  display  table-cell  vertical-align  middle  text-align  center   gt  x000D          Text Here x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    One More Example    parent       display  table       width  100        height  100       child       display  table-cell       vertical-align  middle      text-align  center       lt div class  parent  gt       lt div class  child  gt           lt h4 gt  lt u gt SERVICE IN BANGLADESH FLEET RESERVE  lt br gt  AND  lt br gt  RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE lt  u gt  lt  h4 gt       lt  div gt   lt  div gt

User · Answer

Here is how to use 2 simple flex properties to center n divs on the 2 axis    Set the height of your container  Here the body is set to be at least 100vh  align-items  center will vertically center the blocks justify-content  space-around will distribute the free horizontal space around the divs    x000D   x000D  body   x000D    min-height  100vh  x000D    display  flex  x000D    align-items  center  x000D    justify-content  space-around  x000D    x000D   lt div gt foo lt  div gt  x000D   lt div gt bar lt  div gt  x000D   x000D   x000D

User · Answer

Just make top bottom  left and right to 0     lt html gt   lt head gt   lt style gt   lt div gt     position  absolute  margin  auto  background-color  lightblue  width  100px  height  100px  padding  25px  top  0  right  0  bottom 0  left 0       lt  style gt   lt  head gt   lt body gt    lt div gt  I am in the middle lt  div gt    lt  body gt   lt  html gt

User · Answer

CSS Grid  place-items Finally  we have place-items  center for CSS Grid to make it easier  HTML  lt div class  quot parent quot  gt     lt div class  quot to-center quot  gt  lt  div gt   lt  div gt   CSS  parent     display  grid    place-items  center     Output   x000D   x000D  html  body     height  100       container     display  grid    place-items  center    height  100       center     background   5F85DB    color   fff    font-weight  bold    font-family  Tahoma    padding  10px    x000D   lt div class  container  gt     lt div class  center  contenteditable gt I am always super centered within my parent lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

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 with  translateX -50   translateY -50   to dynamically vertically horizontally center the element     x000D   x000D   container   x000D      position  absolute  x000D      top  50   x000D      left  50   x000D      -moz-transform  translateX -50   translateY -50    x000D      -webkit-transform  translateX -50   translateY -50    x000D      transform  translateX -50   translateY -50    x000D    x000D   lt div class  container  gt  x000D       lt span gt I m vertically horizontally centered  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D       Approach 2 - Flexbox method   Example Here   Full Screen Example  In supported browsers  set the display of the targeted element to flex and use align-items  center for vertical centering and justify-content  center for horizontal centering  Just don t forget to add vendor prefixes for additional browser support  see example      x000D   x000D  html  body   container   x000D      height  100   x000D    x000D   x000D   container   x000D      display  -webkit-flexbox  x000D      display  -ms-flexbox  x000D      display  -webkit-flex  x000D      display  flex  x000D      -webkit-flex-align  center  x000D      -ms-flex-align  center  x000D      -webkit-align-items  center  x000D      align-items  center  x000D      justify-content  center  x000D    x000D   lt div class  container  gt   x000D     lt span gt I m vertically horizontally centered  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D       Approach 3 - table-cell vertical-align  middle   Example Here   Full Screen Example  In some cases  you will need to ensure that the html body element s height is set to 100    For vertical alignment  set the parent element s width height to 100  and add display  table  Then for the child element  change the display to table-cell and add vertical-align  middle   For horizontal centering  you could either add text-align  center to center the text and any other inline children elements  Alternatively  you could use margin  0 auto  assuming the element is block level     x000D   x000D  html  body   x000D      height  100   x000D    x000D   parent   x000D      width  100   x000D      height  100   x000D      display  table  x000D      text-align  center  x000D    x000D   parent  gt   child   x000D      display  table-cell  x000D      vertical-align  middle  x000D    x000D   lt section class  parent  gt  x000D       lt div class  child  gt I m vertically horizontally centered  lt  div gt  x000D   lt  section gt  x000D   x000D   x000D       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 element 50  from the top  relative to the parent element  Use a negative margin-top value that is half of the element s known height  in this case - -9px     x000D   x000D  html  body   container   x000D      height  100   x000D    x000D   x000D   container   x000D      position  relative  x000D      text-align  center  x000D    x000D   x000D   container  gt  p   x000D      position  absolute  x000D      top  50   x000D      left  0  x000D      right  0  x000D      margin-top  -9px  x000D    x000D   lt div class  container  gt  x000D       lt p gt I m vertically horizontally centered  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D       Approach 5 - The line-height method  Least flexible - not suggested    Example Here  In some cases  the parent element will have a fixed height  For vertical centering  all you have to do is set a line-height value 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     x000D   x000D   parent   x000D      height  200px  x000D      width  400px  x000D      background  lightgray  x000D      text-align  center  x000D    x000D   x000D   parent  gt   child   x000D      line-height  200px  x000D    x000D   lt div class  parent  gt  x000D       lt span class  child  gt I m vertically horizontally centered  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

[html] How to center an element horizontally and vertically

Examples related to html

Examples related to css