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; }_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_
The best way to center a box both vertically and horizontally, is to use two containers :
##The outher container :
display: table;
##The inner container :
display: table-cell;
vertical-align: middle;
text-align: center;
##The content box :
display: inline-block;
##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;
}
_x000D_
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
_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 :
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_
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
_x000D_
See also this Fiddle!
If you prefer it without:
flexbox / grid / table
or without the:
vertical-align: middle
You can do:
HTML
<div class="box">
<h2 class="box_label">square</h2>
</div>
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;
}
.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_
<div class='align'>_x000D_
<div></div>_x000D_
<div></div>_x000D_
<div></div>_x000D_
<div></div>_x000D_
<div></div>_x000D_
<div></div>_x000D_
</div>
_x000D_
First child will be aligned vertically and horizontally at center
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 {_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_
<div>_x000D_
<div id=leftFrame>_x000D_
<div id=tabs>_x000D_
<div>first</div>_x000D_
<div>second</div> _x000D_
</div>_x000D_
</div>_x000D_
</div>
_x000D_
This should works
.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_
<div class="center-div">Center Div</div>
_x000D_
CSS Grid: place-items
Finally, we have place-items: center
for CSS Grid to make it easier.
HTML
<div class="parent">
<div class="to-center"></div>
</div>
CSS
.parent {
display: grid;
place-items: center;
}
Output:
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_
<div class="container">
<div class="center" contenteditable>I am always super centered within my parent</div>
</div>
_x000D_
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.
Here is how to use 2 simple flex properties to center n divs on the 2 axis:
align-items: center
will vertically center the blocksjustify-content: space-around
will distribute the free horizontal space around the divsbody {_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_
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>
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*/
}
Grid css approach
#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_
<div id="wrapper">_x000D_
<div class="box"></div>_x000D_
<div class="box"></div>_x000D_
<div class="box"></div>_x000D_
<div class="box"></div>_x000D_
<div class="box main"></div>_x000D_
</div>
_x000D_
Need to follow following New and easy solution:
.centered-class {_x000D_
align-items: center;_x000D_
display: flex;_x000D_
justify-content: center;_x000D_
width: 100vw;_x000D_
height: 100vh;_x000D_
}
_x000D_
<div class="centered-class">_x000D_
I'm in center vertically and horizontally._x000D_
</div>
_x000D_
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;">_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>
Below is the Flex-box approach to get desired result
<!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_
Run this code snippet and see a vertically and horizontally aligned div.
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_
to center the Div in a page check the fiddle link
#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_
<div id="vh">Div to be aligned vertically</div>
_x000D_
Update Another option is to use flex box check the fiddle link
.vh {_x000D_
background-color: #ddd;_x000D_
height: 200px;_x000D_
align-items: center;_x000D_
display: flex;_x000D_
}_x000D_
.vh > div {_x000D_
width: 100%;_x000D_
text-align: center;_x000D_
vertical-align: middle;_x000D_
}
_x000D_
<div class="vh">_x000D_
<div>Div to be aligned vertically</div>_x000D_
</div>
_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_
<div id="wrapper">_x000D_
<div id="left" class="txt">Left</div>_x000D_
<div id="right" class="txt">Right</div>_x000D_
</div>
_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;
}
Another approach is to use table:
<div style="border:2px solid #8AC007; height:200px; width:200px;">_x000D_
<table style="width:100%; height:100%">_x000D_
<tr style="height:100%">_x000D_
<td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>
_x000D_
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.
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...
.flex-container {_x000D_
height: 150px;_x000D_
display: flex;_x000D_
}_x000D_
_x000D_
.flex-item {_x000D_
margin: auto;_x000D_
}
_x000D_
<div class="flex-container">_x000D_
<div class="flex-item">_x000D_
This should be centered!_x000D_
</div>_x000D_
</div>
_x000D_
This extension of margins in each direction will push the element exactly to the middle of its container.
The simplest and cleanest solution for me is using the CSS3 property "transform":
.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_
Source: Stackoverflow.com