绝对中心流体div答案

【问题标题】：Absolute center a fluid div绝对中心流体div
【发布时间】：2016-09-28 01:37:31
【问题描述】：

美好的一天。

我知道如果你想绝对居中一个 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;
}

【问题讨论】：

你的#parent实际上是你定位到的元素的子元素吗>？
#parent div 是 body 的子元素，或者任何 div 是它的父元素...取决于相对位置或绝对位置
jsfiddle.net/Z5SSD 喜欢这个？
不要以为你理解我的问题 - 你为我提供了一个固定的元素。如何在流体元素上进行绝对定位？ - 流体元素的最大宽度/高度限制在哪里？
流体，是指当父级浮动并且可能调整大小（响应式）时将 div 居中？

标签： css

【解决方案1】：

由于width 和height 是流动的，您需要使用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

【讨论】：

谢谢，但在你的小提琴中，只有宽度调整大小，只有高度......并且调整大小时框内的文本不包含在里面......
@DavidVanStaden 也给min-width 和min-height。像这样的东西在这个小提琴jsbin.com/ewizad/10/edit

【解决方案2】：

这可以单独使用 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/

【讨论】：

【解决方案3】：

我将简单地使用flex 来实现这一点......

#parent {
  display: flex;
  justify-content: center;
}

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

【讨论】：