By shuji


2013-10-19 02:01:24 8 Comments

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?

* { box-sizing: border-box; }
#leftFrame {
  background-color: green;
  position: absolute;
  left: 0;
  right: 60%;
  top: 0;
  bottom: 0;
}
#leftFrame #tabs {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
}
#leftFrame #tabs div {
  border: 2px solid black;
  position: static;
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
}
<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>
  </div>
</div>

18 comments

@Diego Favero 2019-02-25 13:45:45

Simple ! Use display flex on container and margin auto on text !!!!

#hood{

 width : 300px;
 height: 100px;
 border: solid 1px #333333;
 display: flex; 
}

#hood span{

  margin: auto
}



<html>
<head></head>
    <body>
        <div id="hood">
            <span> I Am Centered</span>
        </div>
    </body>
</html>

Demo: https://jsfiddle.net/ay95f08g/

Tested : Safari, Chrome, Firefox and Opera on MacOs Mojave . ( all last update on 25th Feb 2019 )

@Bablu Ahmed 2019-01-21 14:44:23

The easiest way of centering a div both vertically and horizontally is as follows:

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

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>

@Code Spy 2019-02-12 15:29:12

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

@Shalmali Jain 2019-01-21 05:24:19

This should works

.center-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}
<div class="center-div">Center Div</div>

@Springer F 2019-01-05 14:38:02

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

#leftFrame {
  display: flex;
  height: 100vh;
  width: 100%;
}

#tabs {
  display: inline-grid;
  grid-auto-flow: row;
  grid-gap: 24px;
  justify-items: center;
  margin: auto;
}

html,body {
  margin:0;
  padding:0;
}
<div>
<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>        
  </div>
</div>
</div>

@Josh Crozier 2013-10-19 02:07:52

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

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
<div class="container">
    <span>I'm vertically/horizontally centered!</span>
</div>


  • 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).

html, body, .container {
    height: 100%;
}

.container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}
<div class="container"> 
  <span>I'm vertically/horizontally centered!</span>
</div>


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

html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}
<section class="parent">
    <div class="child">I'm vertically/horizontally centered!</div>
</section>


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

html, body, .container {
    height: 100%;
}

.container {
    position: relative;
    text-align: center;
}

.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}
<div class="container">
    <p>I'm vertically/horizontally centered!</p>
</div>


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

.parent {
    height: 200px;
    width: 400px;
    background: lightgray;
    text-align: center;
}

.parent > .child {
    line-height: 200px;
}
<div class="parent">
    <span class="child">I'm vertically/horizontally centered!</span>
</div>

@shuji 2013-10-19 02:19:32

Yes that works. I had already used to inline-flex on css3 so I completely forgot about how to take this aproach correctly. I really appreciate it, thank you very much.

@AXMIM 2015-06-23 15:42:09

I opened all the "Fullscreen" example above, I noticed that vertical align is always a bit too much near bottom of the screen (with resolution 1920x1080, the label is 20 pixels too low in the screen). I implemented approach #2 in my webpage and got the same problem even if the div isn't fullscreen. The problem is even worse in my webpage. (100px too low)...

@Dan Dascalescu 2015-07-11 10:07:50

You may want to add Approach 6, using flexbox (works in IE9+, [90%+ browser market coverage](caniuse.com/#feat=flexbox)): display: flex in the parent, and align-self: center in the children.

@Daneo 2015-11-06 15:45:10

Going for the flexbox method, coverage is fine for me. Thanks a lot for this awesome answer!

@ollazarev 2016-04-08 20:57:06

I changed a little Approach 2: jsfiddle.net/yeaqrh48/278. As a result, by reducing the height of the window, the text goes beyond the scope and it becomes impossible to see. How to solve this problem?

@Heitor 2017-06-11 04:32:06

Approach 1 worked perfectly for me. All the Flex thing (Approach 2) is very overrated, it's not that wonder they promised! And when nothing works on centering/aligning things, then the underrated and hated tables come and work brilliantly as always. Try the "sin" of using tables sometimes and see the magic!

@diraria 2018-01-20 21:47:18

With flexbox also margin: auto (without justify-content/align-items) can be used.

@Tomasz ZieliƄski 2018-02-11 19:22:46

Grid css approach

#wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
.main {
    background-color: #444;
}
<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box main"></div>
</div>

@Krishna 2017-07-21 14:19:05

    .align {
        display: flex;
        width: 400px;
        height: 400px;
        border: solid 1px black;
        align-items: center;
        justify-content: space-around;
    }
    .align div:first-child {
        width: 20px;
        height: 20px;
        background-color: red;
        position: absolute; 
    }
    .align div {
        width: 20px;
        height: 20px;
        background-color: blue;
    }
    <div class='align'>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

First child will be aligned vertically and horizontally at center

@yoginder bagga 2017-06-21 06:16:19

Just make top,bottom, left and right to 0.

<html>
<head>
<style>
<div> 
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}


</style>
</head>
<body>

<div> I am in the middle</div>

</body>
</html>

@Divyanshu Rawat 2017-02-21 08:53:38

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.

@JFathi 2016-11-03 18:35:29

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

html,
body,
.container {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mydiv {
  width: 80px;
}
<div class="container">
  <div class="mydiv">h & v aligned</div>
</div>

@Mr Bullets 2015-02-05 04:41:28

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.

@Eirik H 2016-06-03 06:47:32

I believe the transform should be transform: translateX(50%) translateY(50%); instead. The transform above is not syntactically correct according to the Mozilla transform docs.

@Scott Marcus 2018-03-02 14:49:14

@EirikH Not sure what you were looking at, but that syntax is just fine (and says so in the docs). Most of the transform values that can take an X and Y value have a basic function to take both and specialized functions to take just one.

@iamcoming 2015-07-14 15:47:12

Another approach is to use table:

<div style="border:2px solid #8AC007; height:200px; width:200px;">
  <table style="width:100%; height:100%">
    <tr style="height:100%">
      <td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
    </tr>
  </table>
</div>

@tocqueville 2015-09-28 19:12:55

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

.container {
  position: relative;
}

.container a {
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
}
<div class="container">
  <a href="#">Hello world!</a>
</div>

@John Slegers 2016-01-21 01:02:08

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 :

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;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

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 outher container :

  • position : absolute;
  • width: 100%;
  • height: 100%;

Here's a demo for that :

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;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

See also this Fiddle!

@Manish62 2016-03-13 13:46:27

Below is the Flex-box approach to get desired result

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flex-box approach</title>
<style>
  .tabs{
    display: -webkit-flex;
    display: flex;
    width: 500px;
    height: 250px;
    background-color: grey;
    margin: 0 auto;
    
  }
  .f{
    width: 200px;
    height: 200px;
    margin: 20px;
    background-color: yellow;
    margin: 0 auto;
    display: inline; /*for vertically aligning */
    top: 9%;         /*for vertically aligning */
    position: relative; /*for vertically aligning */
  }
</style>
</head>
<body>

    <div class="tabs">
        <div class="f">first</div>
        <div class="f">second</div>        
    </div>

</body>
</html>

@Moes 2016-02-04 23:06:23

to center the Div in a page check the fiddle link

#vh {
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 200px;
    height: 200px;
    background: white;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
<div id="vh">Div to be aligned vertically</div>

Update Another option is to use flex box check the fiddle link

.vh {
    background-color: #ddd;
    height: 200px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

@derp 2016-02-02 12:52:14

  • Approach 6

/*Change units to "%", "px" or whatever*/

#wrapper{
  width: 50%;
  height: 70vh;
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
#left{
  width: 50%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: red;
}
#right{
  width: 50%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: green;
}
.txt{
  text-align: center;
  line-height: 50vh;
}
<div id="wrapper">
   <div id="left" class="txt">Left</div>
   <div id="right" class="txt">Right</div>
</div>

    .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;
    }

Related Questions

Sponsored Content

16 Answered Questions

[SOLVED] How to disable resizable property of textarea?

  • 2011-03-08 16:15:40
  • user549757
  • 1176690 View
  • 2360 Score
  • 16 Answer
  • Tags:   html css

96 Answered Questions

[SOLVED] How to horizontally center a <div>?

60 Answered Questions

[SOLVED] How to check whether a checkbox is checked in jQuery?

42 Answered Questions

[SOLVED] How to vertically center a div for all browsers?

38 Answered Questions

[SOLVED] How do I vertically center text with CSS?

31 Answered Questions

[SOLVED] How to make a div 100% height of the browser window?

  • 2009-10-15 21:18:43
  • mike
  • 1715337 View
  • 1883 Score
  • 31 Answer
  • Tags:   html css css3 height

10 Answered Questions

[SOLVED] Flexbox: center horizontally and vertically

40 Answered Questions

[SOLVED] How to disable text selection highlighting?

4 Answered Questions

20 Answered Questions

[SOLVED] Vertically align text next to an image?

Sponsored Content