How to center a fixed element both vertical and horizontal without fixed 'width' & 'height'?

Question

I have a fixed element without width and height,just contain some flexible text. When I want to center there text vertically and horizontally, I failed. How to achieve? Thanks :)

There is a link be used to reference.

body{
  background: #f63;
}
div{
  background: #069;
  color:#fff;
  position: fixed;
  top: 0;
  left: 50%;

}

Answer 1

Try this

div {
  background: #069;
  color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 2

This can easily achieve by css3 transform properties

**vertically Middle**

div{
  background: #069;
  color:#fff;
  position: fixed;
  top: 50%;
  transform:translateY(-50%);
}

For Horizontal you need width or else

div{
      background: #069;
      color:#fff;
      position: fixed;
      top: 50%;
      transform:translateY(-50%);
      transform:translateX(-50%);
     //comes horizontally center as per elements width
      left:50%;
      right:0;
    }