Question

我试图在页面中心有一个固定的div（位置：固定）。到目前为止，这适用于这个css：

＆＃13;

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

＆＃13;

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

＆＃13;

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

所以基本上这是一个普通的div，但是然后固定并居中：

＆＃13;

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

＆＃13;

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

＆＃13;

我正在寻找一种非javascrpit解决方案

Answer 1

您可以使用translate来完善中心，而无需预先知道盒子的宽度和/或高度。

解决方案是从顶部和左侧放置50％，然后转换为相反的-50％（X和Y轴）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

您可以将任何内容添加到内容框中，而无需考虑其宽度或高度！

演示：

＆＃13;

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

＆＃13;

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

＆＃13;

另见this Fiddle！

中心固定div，宽度适合内容

2 个答案:

演示：