Position absolute div in center of screen view - html

Question

I want to place div that has absolute position in center of the screen view (scrolled or not scrolled).
I have this but its places div in mid od the document and not mid of current view.
#main {
width: 140px;
height:100px;
border: 1px solid Black;
text-align: left;
position: absolute;
top: 50%;
left: 50%;
margin-left:-70px;
margin-top:-50px;
}

Answer 1

Use the following CSS:
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}

Answer 2

Change position:absolute to position: fixed and you should be good to go!
When you say position - absolute, the reference div is the parent div that has a position - relative. However if you say position -fixed, the reference is the browser's window. which is wat you want in your case.
In the case of IE6 i guess you have to use CSS Expression

Answer 3

If you don't want to change your element's position to fixed, here is a solution with keeping your element absolut.
Since CSS's calc() is supported by all browsers now, here a solution using calc().
#main {
width: 140px;
height:100px;
border: 1px solid Black;
text-align: left;
position: absolute;
top: calc(50vh - (/* height */100px / 2));
left: calc(50vw - (/* width */140px / 2));
}

Answer 4

A bit more complex way is to use multiple outer boxes. This method works well with or without hard coded width/height of the middle box (background colors added just to show what each box does):
/* content of this box will be centered horizontally */
.boxH
{
background-color: rgba(0, 127, 255, 0.2);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
}
/* content of this box will be centered vertically */
.boxV
{
background-color: rgba(255, 0, 0, 0.2);
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
/* content of this box will be centered horizontally and vertically */
.boxM
{
background-color: lightblue;
padding: 3em;
}
<div>
some text in the background
</div>
<div class="boxH">
<div class="boxV">
<div class="boxM">
this div is in the middle
</div>
</div>
</div>
https://jsfiddle.net/vanowm/7cj1775e/
If you want display div in the middle regardless of the scroll position, then change position to fixed

Answer 5

Here is a solution using margin and position: fixed :
#main{
width: 140px;
height:100px;
border: 1px solid black;
/* Centering #main on the screen */
position: fixed;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
It centers the div by increasing the margin on all sides to fit the whole screen.
EDIT: I found out there is a shorthand for top,right,bottom,left that is inset. It has been implemented in major browsers and you can see the compatibility on other browsers here
So to absolutely center a div on a screen:
#main{
width: 140px;
height:100px;
border: 1px solid black;
/* Centering #main on the screen */
position: fixed;
margin: auto;
inset: 0;
}

Answer 6

I managed to place absolutely positioned text in the center with the following:
position: absolute;
text-align: center;
left: 1%;
right: 1%;
This is a variation of the answer from Kenneth Bregat. It maintains absolute positioning rather than fixed, plus it solves text wrapping issues mentioned in some answers. Don't forget that the parent will need relative positioning.

Answer 7

What about this trick:
position: absolute;
height:200px;
top: 0;
left: 1%;
right: 1%;

Answer 8

margin-left: -half_of_the_div;
left: 50%;
position: fixed;
example on codepen