CODEWITHSUNDEEP
csspositionfixed
Nathan Curnow
Nathan Curnow

Reputation: 23

Can't align a fixed div in the center

I've currently got a div that I want to have position: fixed;

It's working correctly, but the positioning of the div is not anymore.

I've tried Margin: auto & Text-Align: center but still nothing. I tried having a div around my main one and the outter one being fixed, but still nothing.

Without Position: Fixed it'll center how I want. With Position: fixed; it'll just go to the left.

Anyone know a solution?

Upvotes: 0

Views: 3131

Answers (3)

ab29007
ab29007

Reputation: 7766

Use top, left and transform

.fixed{
  position:fixed;
  width:200px;
  height:200px;
  background-color:green;
  left:0;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
<div class="fixed">
</div>

Upvotes: 0

Wakkos
Wakkos

Reputation: 99

If you want to align a position: fixed element, you'll need to add coordinates values to top, left, right and bottom. Or at least two of them.

position: fixed;
top: 50%;
left: 50%;

Then you'll have to translate the element to be exactly centered, since 0/0 coordinates it's located at the top/left corner of the element.

You can use 

transform: translate(-50%, -50%);

Upvotes: 0

Banzay
Banzay

Reputation: 9470

You need to add left: 0 and right: 0; to center fixed positioned element.

.dd {
    position: fixed;
    width: 50%;
    height: 100px;
    background: lightgreen;
    left: 0;
    right: 0;
    margin: 0 auto;
}
<div class="dd"></div>

Upvotes: 1

Related Questions