CODEWITHSUNDEEP
htmlcss
user99999
user99999

Reputation: 2024

Center position fixed horizontally

I want to dynamically append to the end of the body a fixed-positioned to the bottom box that has 1000px width and is centered horizontally.

When I create it with percentage width I can easily add margins and everything is ok, but when I have it in pixels I can't add margins anymore (it has to be responsive). auto doesn't work either.

How can I do that?

<div style="position: fixed; bottom: 0; width: 1000px; margin: 0 auto; padding: 0;height: 100px; background-color: green;">
</div>

Upvotes: 1

Views: 74

Answers (4)

Himanshu Vaghela
Himanshu Vaghela

Reputation: 1119

Try this also:

div{
  position: fixed; 
  bottom: 0; 
  width: 1000px; 
  left: 50%;
  transform:translateX(-50%);
  height: 100px; 
  background-color: green;
}

Upvotes: 2

Dangling Cruze
Dangling Cruze

Reputation: 3443

Try CSS3, to avoid giving calculated values in pixel for your margins.

left:50%;
transform: translateX(-50%);

Here's a demo: https://jsbin.com/zejutisabo/edit?html,css,output

Upvotes: 0

Andy Furniss
Andy Furniss

Reputation: 3914

http://jsfiddle.net/eesry2ss/

body:after {
    content:"";
    width: 1000px;
    height: 100px;
    position: fixed;
    left: 50%;
    bottom:0;
    margin-left: -500px;
    background-color:green;
}

Upvotes: 1

Vinicius Santana
Vinicius Santana

Reputation: 4106

Try this:

div{
  position: fixed; 
  bottom: 0; 
  width: 1000px; 
  left: 50%;
  margin-left: -500px;
  height: 100px; 
  background-color: green;
}
<div>
 
</div>

Upvotes: 1

Related Questions