How to center a div to the window?

Question

I'd like to center a div using only css and less.

Here is what I tried so far :

#exampleSquare {
    position: absolute;
    height: 100px;
    width: 100px;
    background-color: gray;
    left: calc(~"`$(window).width()` / 2- 50px");
}

Warn :

The above code is based on : using javascript calculated values in less
Don't change the position: absolute, a library is putting it and handling it like so. I simplified the problem.
Don't change the window.width thing to 50%, in my case, the div is inside a lot of containers. So 50% would refer its parent size, not the window.
Don't add a container with text-align: center;, this div container (parent) is also handle by the library.

I just need the left syntax to return me the correct offset.

JSFIDDLE

EDIT :

From Nico O comments, here is what I have in my detailed CSS console:

enter image description here

EDIT :

Nico O pointed that this error comes from the fact that I was using Chromium v.32 and the vw syntax is only supported since v.36 : reference

I think this will solve your problem: http://jsfiddle.net/vKJmz/1/. You can use `100vw` as it is the width of the view port and liekely the size you need. — Nico O, Jul 30 '14 at 14:49
Works like a charm on JSFiddle : http://jsfiddle.net/vKJmz/3/ . But in my case, I don't know why, there is a `Invalide property value.` with the following css : `left: calc(50vw - 450px);` in my Google Chrome console. — Elfayer, Jul 30 '14 at 14:55
my console stays quite, as it should be in this case. Maybe you have an error proceeding this value with Javascript. But to investigate on this, you will have to post a demo with css and js. — Nico O, Jul 30 '14 at 14:58
That's the problem, it's the same code. I just need to write `left: calc(~"50vw - 450px");` because of the Less preprocessing. Also, That's not written in the console, I see it in the detailed CSS of the div. — Elfayer, Jul 30 '14 at 14:59
That seems to be odd. What you have written is incorrect css. Why would you want to change it? There is no need for further changes in this line. — Nico O, Jul 30 '14 at 15:03
If I write in my file : `left: calc(~"50vw - 450px");`, it results in `left: calc(50vw - 450px);`. If I write : `left: calc(50vw - 450px);`, it results in `left: calc(-400vw);`. See : http://stackoverflow.com/questions/17904088/disable-less-css-overwriting-calc — Elfayer, Jul 30 '14 at 15:06
I'am not an less expert, but taken from this answer: http://stackoverflow.com/questions/16323310/how-can-i-instruct-less-to-ignore-math-for-certain-styles try this: `~"calc(50vw - 450px)";` — Nico O, Jul 30 '14 at 15:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/58366/discussion-between-nico-o-and-elfayer). — Nico O, Jul 30 '14 at 15:15

score 2 · Accepted Answer · answered Jul 30 '14 at 15:21

#exampleSquare {
    position: absolute;
    height: 100px;
    width: 100px;
    background-color: gray;
    left: 50%;
    margin-left:-50px;//Half width
}

I know you said not to put 50% in left as it would result in the parent's width, but the thing is it is relative to its positionned container... If you take half the window size and put it in the left value, if its container's position is relative or absolute the left:0 is it's border and not the window border. Hence why I think that this answer would help.

Else, you'd need this snippet but I do not know JS calculations in less so can't say if it is possible:

 ($(window).width()-$(this).offsetParent().offset())/2

It takes the difference between the window's width and the current placement of the left:0px that would be applyed. Then divide by two as we want the center and not complete right.

score 2 · Answer 2 · edited Jun 08 '22 at 05:21

2

emphasized text#exampleSquare {
    position: absolute;
    height: 100px;
    width: 100px;
    background-color: gray;
    left: calc(50vw - 100px);
    top:calc(50vh - 100px);
}

edited Jun 08 '22 at 05:21

Seraphim's

12,559
20
88
129

answered Jul 30 '14 at 15:26

David Onjuk

21
2

pls post a description – Dennis Kriechel Jul 30 '14 at 15:31

score 0 · Answer 3 · answered Jun 08 '22 at 05:29

0

#exampleSquare {
    position: absolute;
    height: 100px;
    width: 100px;
    background-color: gray;
     top:50%;
     transform: translate(0, -50%);
/*     left: calc(~"`$(window).width()` / 2- 50px"); */
}

use this if it's work

answered Jun 08 '22 at 05:29

Smit

32
3

How to center a div to the window?

3 Answers3