如何在没有固定“宽度”的情况下将垂直和水平的固定元件对中。 '高度'？

Question

我有一个没有宽度和高度的固定元素，只包含一些灵活的文本。当我想要垂直和水平居中文本时，我失败了。怎么实现？谢谢:)）

There is a link be used to reference.

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

}

Answer 1

试试这个

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

Answer 2

这可以通过css3转换属性轻松实现

**vertically Middle**

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

对于水平，您需要宽度或其他

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;
    }