Question

父级和子级的高度将在运行时给出，我已经尝试过vertical-align，但是它没有用，由于高度是动态的，margin/top属性将不正确。请提供正确的方法来解决此问题。

预期：孩子应该是父母的中心。宽度应保持不变

更新：@xmastertje的解决方案正在工作，但是如果我更改孩子的身高，它将损坏。这个问题是大问题的一部分，所以我不能在这里使用calc。实时地，我有嵌套的元素，每个元素应位于其父元素的中心。

:root {
  --parent-height: 500px;
  --child-height: 200px;
}

html,
body {
  width: 100%;
  height: 100%;
}

.parent {
  height: var(--parent-height);
  background-color: #bada55;
  position: relative;
}

.child {
  height: var(--child-height);
  background-color: goldenrod;
}

<div class="parent">
  Parent Has 500px Height
  <div class="child">
    child has 200px height
  </div>
</div>

Answer 1

使用margin-top和position:absolute。有了这个，您可以轻松解决。

:root{
			--parent-height: 500px;
			--child-height: 200px;
		}
		
		html, body{
			width: 100%;
			height: 100%;
		}
		.parent{
			height: var(--parent-height);
			background-color: #bada55;
			position: relative;
		}
		.child{
			height: var(--child-height);
			background-color: goldenrod;
            position: absolute;
            top: 50%;
            width: 100%;
            margin-top: -6em;
		}

<div class="parent">
		Parent Has 500px Height
		<div class="child">
			child has 200px height
		</div>
	</div>

编辑

您必须使用transform。即使您更改孩子或父母的身高，该解决方案也能保持正常工作。

:root{
			--parent-height: 500px;
			--child-height: 200px;
		}
		
		html, body{
			width: 100%;
			height: 100%;
		}
		.parent{
			height: var(--parent-height);
			background-color: #bada55;
			position: relative;
		}
		.child{
			height: var(--child-height);
			background-color: goldenrod;
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%,-50%);
            width:100%;
		}

<div class="parent">
		Parent Has 500px Height
		<div class="child">
			child has 200px height
		</div>
	</div>

Answer 2

如果您只是想让孩子居中并且宽度相同，则可以使用assert.async()和margin-top来计算孩子与父母的上边距像这样

calc()

希望得到帮助。...

Answer 3

您可以像这样使用flexbox：

 .parent {
   height: var(--parent-height);
   background-color: #bada55;
   position: relative;
   display: flex;
   justify-content: center;
   flex-direction: column;
}

Answer 4

您好，我认为最好的方法是使用表格单元格属性。无论父级的高度如何，孩子都将始终居中对齐。

但是，如果您希望父级为全角，则可以使用flex属性。我希望这样会很好。

:root {
  --parent-height: 500px;
  --child-height: 200px;
}

html,
body {
  width: 100%;
  height: 100%;
}

.parent {
  height: var(--parent-height);
  background-color: #bada55;
  position: relative;
  display: flex;
  justify-content: center; 
  align-items:center;
  width:100%;
   
 
   
  
}

.child {
  height: var(--child-height);
  background-color: goldenrod;
}

<div class="parent">
  Parent Has 500px Height
  <div class="child">
    child has 200px height
  </div>
</div>

Answer 5

您可以使用弹性盒轻松完成

:root {
  --parent-height: 500px;
  --child-height: 200px;
}

html,
body {
  width: 100%;
  height: 100%;
}

.parent {
  height: var(--parent-height);
  background-color: #bada55;
  position: relative;
  display: flex;
  justify-content:center;
  flex-direction: column;
  align-items: center;
}

.child {
  height: var(--child-height);
  background-color: goldenrod;
  
 width:100%;
}

<div class="parent">
  <p>Parent Has 500px Height</p>
    <br>
  <div class="child">
    <p>child has 200px height</p>
  </div>
</div>

Answer 6

我使用function add(x, y, toDbl) { result = 0; if (toDbl) var result = (x + y) * 2; else var result = (x + y); return result; }使孩子成为中心。尝试下面的代码。

flexbox

:root {
  --parent-height: 500px;
  --child-height: 200px;
}

html,
body {
  width: 100%;
  height: 100%;
}

.parent {
  height: var(--parent-height);
  background-color: #bada55;
  position: relative;
  display:flex;
  display: -ms-flexbox!important;
  flex-wrap:wrap;
  -webkit-flex-wrap: wrap;
}

.child {
  height: var(--child-height);
  background-color: goldenrod;
  -ms-flex-align: center!important;
  align-items: center!important;
  width:100%;
}

CSS将子div置于中心

6 个答案: