How to make a floating div stick to the top - css

I have 3 "boxes"/divs side by side with this class:
.roundedBox {
float: left;
background-color: aliceblue;
border-radius: 15px;
padding: 20px;
margin: 20px;
}
Because the midle one is much taller then the other 2, I would like the other 2 to come down while we scroll down, so I tought to add this code/css class to the ones on the sides:
.stickTop {
position: sticky;
top: 0;
}
Doesn't seem to make any diference, what am I missing?


You have to do some tricks in there PLUS fix the structure of your HTML - because using "float" might become a problem with responsiveness.
1st, create <div> as the outer container, this will represent as the main "row" of your 3 column boxes (roundedBox, results, roundedBox). Class name it as "container". In your CSS, this one should have display: flex; flex-direction: row;
2nd, create another 3 <div> inside the class="container" as the column boxes. Class name each as "box-item". Add another class name on the first and third "roundedBox". In your CSS, "box-item" should have width: 60%; position: relative; and "roundedBox" should have width: 20%;
3rd, Inside of each class="box-item", there will be another <div class="inner-box-item">. Because the tricks of floating boxes will start here. Add class names on the first and third "inner-box-item" with "box-float" and "box-left"/"box-right". In your CSS, "box-float" should have position: fixed;. This should float the left and right boxes upon scrolling the page. In your CSS again, add ".box-float" together with ".roundedBox" to have 20% width of the box.
Take note that every time you use position: fixed; in CSS, you have to always declare the item's width.
If you're asking why "inner-box-item" is necessary, you can experiment by removing it and just position: fixed; the ".box-item" instead. See what will happen there only if you have time.
See the HTML structure and CSS below, this should be easier for you to adjust the boxes in smaller devices too.
Structure:
body {
padding: 0;
margin: 0;
}
.container {
display: flex;
flex-direction: row;
}
.box-item {
width: 60%;
padding: 20px;
position: relative;
}
.roundedBox, .box-float {
width: 20%;
}
.inner-box-item {
background: pink;
height: 1000px;
}
.box-float {
position: fixed;
max-height: 50vh;
}
.box-left {
left: 20px
}
.box-right {
right: 20px
}
p {
margin: 0;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="box-item roundedBox">
<div class="inner-box-item box-float box-left">
<p>A</p>
</div>
</div>
<div class="box-item">
<div class="inner-box-item">
<p>B</p>
</div>
</div>
<div class="box-item roundedBox">
<div class="inner-box-item box-float box-right">
<p>C</p>
</div>
</div>
</div>
</body>
</html>


Hey you can check this approach below
.grid-container {
display: grid;
gap: 1rem;
grid-template-columns: min-content 1fr min-content;
position: relative;
}
.item-sticky {
background: firebrick;
padding: 1rem;
height: 150px;
position: sticky;
top: 10px;
}
.item-long {
background: orchid;
padding: 1rem;
height: 200vh;
}
<div class="grid-container">
<div class="item-sticky">
Some content
</div>
<div class="item-long">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, dolores.</div>
<div class="item-sticky">Somecontent</div>
</div>


After a bit of playing around with the solutions of #Servesh Chaturvedi and #Sabrina L. (and a bit of dispair)
I think I found something that uses the principle of both using flex
.roundedBox {
background-color: aliceblue;
border-radius: 15px;
padding: 20px;
margin: 20px;
}
.grid-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.sticky {
position: sticky;
top: 10px;
}
.item-long {
background: orchid;
height: 200vh;
}
<div class="grid-container">
<div class="sticky roundedBox">Some content</div>
<div class="roundedBox item-long ">Lorem ipsum dolor </div>
<div class="sticky roundedBox">Somecontent</div>
</div>

Related

to position center in a view / position:absolute &? [duplicate]

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>

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). Remember the parent container will also need height (in this case, 100%).
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>

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.

Here is how to use two simple flexbox properties to center n divs on the two axes:
Set the height of your container: Here the body is set to be at least 100 viewport height.
align-items: center; will center the blocks vertically if flex direction is row else horizontally if flex direction is column
justify-content: space-around; will distribute the free space vertically if flex direction is row else horizontally if flex direction is column around the div elements
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
}
<div>foo</div>
<div>bar</div>

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

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;
}
<div class="container">
<div class="center" contenteditable>I am always super centered within my parent</div>
</div>

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>

.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

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

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>

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>

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>

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>

Need to follow following New and easy solution:
.centered-class {
align-items: center;
display: flex;
justify-content: center;
width: 100vw;
height: 100vh;
}
<div class="centered-class">
I'm in center vertically and horizontally.
</div>

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">
Hello world!
</div>

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.

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>

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>

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>

If you prefer it without flexbox, grid, table or 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;
}

If it's only about text aligning it's simple. Just use this:
vertical-align: middle; /* vertical centering*/
text-align: center; /* horizontal centering*/
Parent styling is not needed.
In some cases when the parent has some style properties it may affect the child, where this will not work properly.

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

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>

I see this the shortest and easiest way. However it depends on the element width and height. So feel free to adjust more the percentages on translate(50%, 50%);.
.divContainer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translate(50%, 50%);
}
<div class="divContainer">I am centered</div>

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...
.flex-container {
height: 150px;
display: flex;
}
.flex-item {
margin: auto;
}
<div class="flex-container">
<div class="flex-item">
This should be centered!
</div>
</div>
This extension of margins in each direction will push the element exactly to the middle of its container.

In the case where I was trying to vertically align text content inside button::before and button::after, I was able to get it working using vertical-align: text-top.
button::after {
vertical-align: text-top;
}

I use this CSS code:
display: grid;
justify-content: center;
align-items: center;
The source is CSS-Tricks

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

Element Centering From The Left Instead Of Center [duplicate]

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>

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). Remember the parent container will also need height (in this case, 100%).
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>

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.

Here is how to use two simple flexbox properties to center n divs on the two axes:
Set the height of your container: Here the body is set to be at least 100 viewport height.
align-items: center; will center the blocks vertically if flex direction is row else horizontally if flex direction is column
justify-content: space-around; will distribute the free space vertically if flex direction is row else horizontally if flex direction is column around the div elements
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
}
<div>foo</div>
<div>bar</div>

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

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;
}
<div class="container">
<div class="center" contenteditable>I am always super centered within my parent</div>
</div>

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>

.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

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

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>

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>

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>

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>

Need to follow following New and easy solution:
.centered-class {
align-items: center;
display: flex;
justify-content: center;
width: 100vw;
height: 100vh;
}
<div class="centered-class">
I'm in center vertically and horizontally.
</div>

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">
Hello world!
</div>

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.

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>

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>

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>

If you prefer it without flexbox, grid, table or 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;
}

If it's only about text aligning it's simple. Just use this:
vertical-align: middle; /* vertical centering*/
text-align: center; /* horizontal centering*/
Parent styling is not needed.
In some cases when the parent has some style properties it may affect the child, where this will not work properly.

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

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>

I see this the shortest and easiest way. However it depends on the element width and height. So feel free to adjust more the percentages on translate(50%, 50%);.
.divContainer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translate(50%, 50%);
}
<div class="divContainer">I am centered</div>

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...
.flex-container {
height: 150px;
display: flex;
}
.flex-item {
margin: auto;
}
<div class="flex-container">
<div class="flex-item">
This should be centered!
</div>
</div>
This extension of margins in each direction will push the element exactly to the middle of its container.

In the case where I was trying to vertically align text content inside button::before and button::after, I was able to get it working using vertical-align: text-top.
button::after {
vertical-align: text-top;
}

I use this CSS code:
display: grid;
justify-content: center;
align-items: center;
The source is CSS-Tricks

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

Content alignt to bottom of page instead of bottom of div

I want my navigation text to be displayed at the bottom right of the header div but no matter what I try it only wants to align at the bottom of the page or some other position I do not want. I don't understand why this is happening, absolute should refer to the header div, correct?
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial;
scroll: overflow;
}
.header {
margin: auto;
width: 100%;
display: flex;
background: gray;
height: 60px;
}
.header-navigation {
position: absolute;
bottom: 0px;
right: 0px;
}
.container {
margin: auto;
width: 100%;
display: flex;
height: calc(100vh - 60px);
}
.left {
background: #e8edf0;
flex-basis: 45%;
}
.right {
background: grey;
flex-basis: 55%;
}
.content {
margin: 20px;
padding: 20px;
background: white;
}
</style>
</head>
<body>
<div class="header">
<div class="header-navigation">
test
</div>
</div>
<div class="container">
<div class="left">
<div class="content">
</div>
</div>
<div class="right">
<div class="content">
</div>
</div>
</div>
</body>
</html>

You should add position: relative; to header. This will make the .header-navigation consider position from .header when you make it absolute.
.header {
position: relative;
}
.header-navigation {
position: absolute;
}
Now .header-navigation will use position according to .header

absolute should refer to the header div, correct?
Only if header div itself has a position.
When you set the position of one of its children to absolute as you have in this case, the system hunts back up the page to find the first ancestor element that has a position and then it positions the element you are trying to position relative to that.

CSS 'Content footer' sticks to the bottom when content doesn't exceed scrollheight but flows with content when it does

this is a tricky one...
Say if I have the following: (see diagram).
If the content + 'content footer' does not exceed the scrollheight I need the 'content footer' to be positioned at the bottom of the page. (See image, example A)
If the content + 'content footer' exceeds the scrollheight, Then as the content increases, I want to have the 'content footer' flow after the main content just as if it were another block element, but be the full width of the page. (See image example B)

It could be made with flex
http://codepen.io/HerrSerker/pen/GpaxNJ
#content-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;right: 0;
bottom: 0;
height: 100%;
width: 100%;
overflow-y: visible;
}
#content {
width: 400px;
margin: 0 auto;
background-color: silver;
padding: 20px;
}
#actual-footer {
position: fixed;
bottom: 0;
left: 0;right: 0;
height: 20px;
background-color: gold;
text-align: center;
padding: 5px;
}
#content-footer {
margin-bottom: 30px;
background-color: blue;
color:white;
text-align: center;
padding: 5px;
padding-top: 50px;
}
body {
padding: 0;
margin: 0;
overflow-y: scroll;
}
body,html {
height: 100%;
}
<div id="content-wrapper">
<div id="content">
<h1>Content</h1>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
<div id="content-footer">Content Footer</div>
</div>
<div id="actual-footer">Actual Footer</div>
edit
If flex is no good, you should try using display table, table-row and table-cell

I've got a breakout CSS here: http://codepen.io/HerrSerker/pen/PqjBrg
It works by wrapping the content-footer with two divs
<div class="breakout"><div class="breakout_back"> with the style
.breakout {
position: relative;
left: 50%;
width: 100vw;
text-align: center;
}
.breakout .breakout_back {
position: relative;
left: -50%;
}
This is only compatible with browsers which support 100vw (view width) units:
http://caniuse.com/#feat=viewport-units
A different strategy would be: Every content has 100% width by default. And every content should deal with it's width for itself

How do I center content in a div using CSS?

How do I center content in a div both horizontally and vertically?

To align horizontally it's pretty straight forward:
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align: center;
}
.bodyclass #container {
width: ???px; /*SET your width here*/
margin: 0 auto;
text-align: left;
}
</style>
<body class="bodyclass ">
<div id="container">type your content here</div>
</body>
and for vertical align, it's a bit tricky:
here's the source
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>

Update 2020:
There are several options available*:
*Disclaimer: This list may not be complete.
Using Flexbox
Nowadays, we can use flexbox. It is quite a handy alternative to the css-transform option. I would use this solution almost always. If it is just one element maybe not, but for example if I had to support an array of data e.g. rows and columns and I want them to be relatively centered in the very middle.
.flexbox {
display: flex;
height: 100px;
flex-flow: row wrap;
align-items: center;
justify-content: center;
background-color: #eaeaea;
border: 1px dotted #333;
}
.item {
/* default => flex: 0 1 auto */
background-color: #fff;
border: 1px dotted #333;
box-sizing: border-box;
}
<div class="flexbox">
<div class="item">I am centered in the middle.</div>
<div class="item">I am centered in the middle, too.</div>
</div>
Using CSS 2D-Transform
This is still a good option, was also the accepted solution back in 2015.
It is very slim and simple to apply and does not mess with the layouting of other elements.
.boxes {
position: relative;
}
.box {
position: relative;
display: inline-block;
float: left;
width: 200px;
height: 200px;
font-weight: bold;
color: #333;
margin-right: 10px;
margin-bottom: 10px;
background-color: #eaeaea;
}
.h-center {
text-align: center;
}
.v-center span {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
<div class="boxes">
<div class="box h-center">horizontally centered lorem ipsun dolor sit amet</div>
<div class="box v-center"><span>vertically centered lorem ipsun dolor sit amet lorem ipsun dolor sit amet</span></div>
<div class="box h-center v-center"><span>horizontally and vertically centered lorem ipsun dolor sit amet</span></div>
</div>
Note: This does also work with :after and :before pseudo-elements.
Using Grid
This might just be an overkill, but it depends on your DOM. If you want to use grid anyway, then why not. It is very powerful alternative and you are really maximum flexible with the design.
Note: To align the items vertically we use flexbox in combination with
grid. But we could also use display: grid on the items.
.grid {
display: grid;
width: 400px;
grid-template-rows: 100px;
grid-template-columns: 100px 100px 100px;
grid-gap: 3px;
align-items: center;
justify-content: center;
background-color: #eaeaea;
border: 1px dotted #333;
}
.item {
display: flex;
justify-content: center;
align-items: center;
border: 1px dotted #333;
box-sizing: border-box;
}
.item-large {
height: 80px;
}
<div class="grid">
<div class="item">Item 1</div>
<div class="item item-large">Item 2</div>
<div class="item">Item 3</div>
</div>
Further reading:
CSS article about grid
CSS article about flexbox
CSS article about centering without flexbox or grid

with all the adjusting css.
if possible, wrap it with a table
with height and width as 100% and
td set it to vertical align to middle, text-align to center

By using transform: works like a charm!
<div class="parent">
<span>center content using transform</span>
</div>
//CSS
.parent {
position: relative;
height: 200px;
border: 1px solid;
}
.parent span {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

Resources