Question

如何使用css使绝对中心水平和垂直成为具有流体宽度和高度的div？在此先感谢您的帮助。

＆＃13;

#div_parent{
	background:#ccc;
	position:relative;
}

.div_child{
  background-color:#338BC7;
  position: absolute;
  left: 50%;  
  width: auto;
  height: auto; 
  padding: 20px;
  top:25%;
  background: blue;
  color: white;
  text-align: center;
  border:1px solid #ccc;
}

＆＃13;

<div  id="div_parent"> 
<div class="div_child">
	<p>Centered In The Middle Of The Page.</p>
</div>
</div>

＆＃13;

Answer 1

当我需要流体宽度时，我更喜欢使用这种方法：

CSS

.background { display: table; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.background > div { display: table-cell; vertical-align: middle; text-align: center; }

HTML

<div>
  <div>
    <p>Centered In The Middle Of The Page.</p>
  </div>
</div>

Demo on jsfiddle.

希望它适合你。

Answer 2

您的代码存在以下几个问题：

您的height和html未指定body和#div_parent，否则任何后代元素都不会引用设置它们的位置和/或尺寸以百分比为单位。
您没有在.div_child上指定尺寸（宽度/高度），否则您无法将其绝对定位的儿童（相对于它）定位到垂直中心。此外，由于您希望将transform: translate定位到页面的中心，为什么还要让父母围绕它。

除了修复上述内容之外，通常用于水平和垂直对齐元素的技巧是使用50%将其移回.div_child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); ... }。

像这样：

* { box-sizing: border-box; paddin:0; margin: 0; }
html, body { height: 100%; width: 100%; }
#div_parent{ height: 100%; width: 100%; background: #ccc; position: relative;}
.div_child {
    background-color: #338BC7;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: auto; height: auto; 
    padding: 20px; color: white; text-align: center; border: 1px solid #ccc;
}

小提琴：http://jsfiddle.net/abhitalks/Lnqvqnkn/

<强>段：

＆＃13;

<div  id="div_parent"> 
  <div class="div_child">
	<p>Centered In The Middle Of The Page.</p>
  </div>
</div>

＆＃13;

$subset = array_filter(
    $originalArray,
    function($value) {
        return isset($value[0]) && $value[0] == 2012;
    }
);

＆＃13;

绝对中心水平和垂直一个div，流体宽度和高度？

2 个答案: