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_

* { 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_

<div id=leftFrame>_x000D_
  <div id=tabs>_x000D_
    <div>first</div>_x000D_
    <div>second</div>_x000D_
  </div>_x000D_
</div>

_x000D_

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_

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_

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

_x000D_

See also this Fiddle!

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

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

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

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

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

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

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

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_

body {_x000D_
  min-height: 100vh;_x000D_
  display: flex;_x000D_
  align-items: center;_x000D_
  justify-content: space-around;_x000D_
}

_x000D_

<div>foo</div>_x000D_
<div>bar</div>

_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

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

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

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 easiest way of centering a div both vertically and horizontally is as follows:

_x000D_

<div style="display: table; width: 200px; height: 200px; border: 1px solid black;">_x000D_
    <div style="display: table-cell; vertical-align: middle; text-align: center;">_x000D_
        Text Here_x000D_
    </div>_x000D_
</div>

_x000D_

One More Example:

.parent {
    display: table; 
    width: 100%; 
    height: 100%;
}

.child {
    display: table-cell; 
    vertical-align: middle;
    text-align: center;
}


<div class="parent">
    <div class="child">
        <h4><u>SERVICE IN BANGLADESH FLEET RESERVE <br> AND <br> RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE</u></h4>
    </div>
</div>

User · Answer

Below is the Flex-box approach to get desired result

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
  <meta charset="utf-8">_x000D_
  <meta name="viewport" content="width=device-width">_x000D_
  <title>Flex-box approach</title>_x000D_
<style>_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_
</style>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
    <div class="tabs">_x000D_
        <div class="f">first</div>_x000D_
        <div class="f">second</div>        _x000D_
    </div>_x000D_
_x000D_
</body>_x000D_
</html>

_x000D_

User · Answer

Run this code snippet and see a vertically and horizontally aligned div.

_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_

<div class="container">_x000D_
  <div class="mydiv">h & v aligned</div>_x000D_
</div>

_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

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

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

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

The simplest and cleanest solution for me is using the CSS3 property "transform":

_x000D_

.container {_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
.container a {_x000D_
  position: absolute;_x000D_
  top: 50%;_x000D_
  transform: translate(0,-50%);_x000D_
}

_x000D_

<div class="container">_x000D_
  <a href="#">Hello world!</a>_x000D_
</div>

_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

[html] How to center an element horizontally and vertically

The answer is

`CSS Grid: place-items`

The simplest `flexbox` approach:

Examples related to html

Examples related to css

Tags

[html] How to center an element horizontally and vertically

The answer is

CSS Grid: place-items

The simplest flexbox approach:

Examples related to html

Examples related to css

Tags

`CSS Grid: place-items`

The simplest `flexbox` approach: