绝对的中心是一个流动的div

时间:2013-03-08 11:32:37

标签: css

美好的一天。

我知道如果你想要一个div绝对居中,你可以这样做:

<div id="parent">
   <div id="child">blahblah</div>
</div>

CSS:

#parent{
   width: 500px;
   height: 500px;
   position: absolute; /*(or relative)*/
   top: 50%;
   left: 50%;
   margin-top: -250px;
   margin-left: -250px;
   text-align: center;
}

如果父div是流体div怎么办?你如何绝对中心意味着:

#parent{
  max-width: 500px;
  max-height: 500px;
  top: 50%; ->is this right?
  left: 50%; -> is this right?
  margin-top: ???;
  margin-left: ???;
  text-align: center;
}

3 个答案:

答案 0 :(得分:0)

由于widthheight不稳定,您需要使用javascript或jQuery。只需在head标记中添加以下代码即可。 (以下示例在javascript中

<script>
   window.onresize = function(){
      //To work even on resize
      getToMiddle();
   }
   window.onload = function(){
      getToMiddle();
   }

   function getToMiddle(){
      var box = document.getElementById('parent');
      var height = box.offsetHeight;
      var width = box.offsetWidth;
      box.style.top = -(height/2);
      box.style.left = -(width/2);
   }
</script>

你的css会是这样的:

#parent{
   max-width: 500px;
   max-height: 500px;
   background-color:green;
   position:absolute;
   top: 50%;
   left: 50%;
  /* width: 10%;
   height: 10%; */
}

要进行测试,请提供width: 10%; and height: 10%

<强> Working Fiddle

答案 1 :(得分:0)

这可以单独用CSS完成。

#parent {
  position: absolute;
  max-width: 500px;
  max-height: 500px;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

请参阅演示https://jsfiddle.net/matharden/8kmvt8qd/

答案 2 :(得分:0)

我只是使用flex来实现这一目标......

&#13;
&#13;
#parent {
  display: flex;
  justify-content: center;
}
&#13;
<div id="parent">
  <div id="child">blahblah</div>
</div>
&#13;
&#13;
&#13;