居中固定 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

您可以使用 translate 来完善中心，而无需预先知道框的宽度 and/or 高度。

解决办法是把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>

Answer 2

要使 #msg 居中，请考虑以下技巧。

你只需要两个容器！

1。外容器：

应该有display: table;

2。内胆：

应该有display: table-cell;
应该有vertical-align: middle;
应该有text-align: center;

3。 #msg 框本身：

应该有display: inline-block;
应该有例如。 text-align: left; 或 text-align: right; 如果您不希望文本居中对齐。

您可以在内容框中添加任何您想要的内容，而无需关心其宽度或高度！

演示：

body {
    margin : 0;
}

#outer-container {
    position : fixed;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

#inner-container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#msg {
    text-align: left;
    display: inline-block;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div id="outer-container">
   <div id="inner-container">
     <div id="msg">
        Hello
     </div>
   </div>
</div>

另见 this Fiddle!

居中固定 div 宽度适合内容

Centered fixed div with width fit to content

html

css

centering

演示：