Always center fixed item

Question

How can I horizontally center the fixed element which has red border? I added 3 cubes for visual hint.

By center I mean that center cube is in viewport center (and stay there when viewport is resized) and rest of the fixed element is cut off from left and right if necessary.

This needs to be old-school, i.e no flexbox.

#element {
  width: 120%;
  height: 200px;
  position: fixed;
  left: 0;
  top: 0;
  border: 2px dashed #ec6161;
}

#children {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

.child {
  width: 50px;
  height: 50px;
  border: 2px dashed #888;
  postion: absolute;
}

<div id="element">
  <div id="children">
    <div class="child left"></div>
    <div class="child center"></div>
    <div class="child right"></div>
  </div>
</div>

the `left:50%;transform: translateX(-50%);` old trick will do it — Temani Afif, May 25 '20 at 09:01

score 1 · Accepted Answer · answered May 25 '20 at 08:57

1

#element {
  width: 120%;
  height: 200px;
  position: fixed;
  left: 0;
  top: 0;
  border: 2px dashed #ec6161;
  margin-left: -10%;
}

You could add margin-left: -10%to your #element component

answered May 25 '20 at 08:57

Richard Price

482
4
13

Always center fixed item

1 Answers1