Element will not stay centered, especially when re-sizing screen

Question

My problem is that I cannot horizontally center a triangle pointer.

Well, I can center the pointer for some window sizes, but when I shrink or extend the window it p

Answer 1

You could potentially use the new CSS3 calc() function which allows you to do arithmetic to figure out the center point.

To get your center point, the calculation will have to be:

50% - (56px / 2)

So this ends up being

50% - 28px

Putting this into the calc() function should then figure it out within the browser and position it perfectly in the center.

body {
  background: #333333;
}
.container {
  width: 98%;
  height: 80px;
  line-height: 80px;
  position: relative;
  top: 20px;
  min-width: 250px;
  margin-top: 50px;
}
.container-decor {
  border: 4px solid #C2E1F5;
  color: #fff;
  font-family: times;
  font-size: 1.1em;
  background: #88B7D5;
  text-align: justify;
}
.container:before {
  top: -33px;
  left: calc(50% - 28px);
  transform: rotate(45deg);
  position: absolute;
  border: solid #C2E1F5;
  border-width: 4px 0 0 4px;
  background: #88B7D5;
  content: '';
  width: 56px;
  height: 56px;
}

great distance