html - 居中固定 div，宽度适合内容

Question

我试图在页面中央有一个固定的div(位置:固定)。到目前为止，可以使用此 css:

#msg{
  border: 1px solid black;
  position: fixed;
  z-index: 9999;
  background-color: white;
  bottom: 0px;
  top: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 100px;
  height: 100px;
  padding: 5px;
}

<div id="msg"> Hello </div>

唯一不起作用的是尝试获取 div 的大小(宽度，如果可能的话还有高度)以自动匹配其中内容的大小。

所以基本上是像这样的普通 div，但随后固定并居中:

#msg2{
  border: 1px solid;
  display: inline-block;
}

<div id="msg2"> hello </div>

我正在寻找非 javascrpit 解决方案

Answer 1

您可以使用翻译来完美居中，而无需预先知道框的宽度和/或高度。

解决方案是从顶部和左侧放置 50%，然后平移到相反的 -50%(X 和 Y 轴):

#msg2{
  border: 1px solid;
  display: inline-block;
  position: fixed;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%); /* iOS needed */
  transform: translate(-50%, -50%);
}

<div id="msg2"> hello </div>