父母和孩子的身高都可以以百分比表示吗？ [英] Can parent and child height both be in percentage?

问题描述

我正在尝试将图片完全填充到设备的全屏幕中。所以我给了 .container：100％和body，html到100％的高度。现在我想垂直居中对齐子 div，无论它有什么内容，但它应该垂直居中。所以我试着在 margin-top 上给 50％高度和 25％ c $ c>以及底部。所以正好100％应该按照calc计算。但它没有按照预期的方式发生。

为什么它不是垂直居中？换句话说，为什么在div的顶部和底部没有相等的空间，尽管我已经给出了相同的顶部和底部空白，其中 height：50％;

如何居中对齐垂直？不应该有垂直滚动条，因为我已经为身体html.container给出了100％的高度，但它正在出现。

CSS

  .child {
 width：100％; 
身高：50％; 
 margin-top：25％; 
 margin-bottom：25％; 
背景颜色：红色; 
颜色：白色; 
} 
 html，body，.container {
 width：100％; 
身高：100％; 
 background：url（'http://cdn.morguefile.com/imageData/public/files/e/earl53/ 
 preview / fldr_2009_05_25 / file5821243281047.jpg'）; 
 background-size：cover; 
 
 $ b  

HTML

 < div class =container> 
< div class =child> 
您好我（红色的div）应该在垂直方向上哼唱
< / div> 
< / div> 
  

JSFIDDLE

解决方案

根据容器的宽度计算百分比边距 。 请参阅此处

百分比指的是包含块的宽度

（指边距） p>

所以你不能在CSS中使用边距来保持垂直居中（除非你对conatiner和child有固定的高度）。

您可以使用绝对定位 strong>

以孩子为垂直居中的CSS：

 位置：绝对; 
 top：25％; 
剩下：0; 
身高：50％; 
宽度：100％; 
  

FIDDLE

在这个小提琴中，我还添加了

  body，html {
 margin：0; 
 padding：0; 
} 
  

I'm trying to fill the image exactly to the full screen of the device. So i have given .container:100% and body,html to 100% height. Now i want to center align the child div vertically no matter what content it has but it should be centered vertically. So i tried giving 50% height and 25% on both margin-top as well bottom. so exactly 100% it should fit as per calc. But it is not happening the way expected.

Why it is not centering vertically? In other words, Why there is no equal space in top and bottom of the div even though i have given equal top and bottom margin with height:50%;

How to center align it in vertical? There shouldn't be vertical scroll bar as i have given height as 100% for body,html.container but it is appearing.

CSS

.child{    
    width: 100%;
    height: 50%;
    margin-top: 25%;
    margin-bottom: 25%;
    background-color: red;
    color:white;
}
html,body,.container{
    width:100%;
    height:100%;
    background:url('http://cdn.morguefile.com/imageData/public/files/e/earl53/
                   preview/fldr_2009_05_25/file5821243281047.jpg');
    background-size:cover;

}

HTML

<div class="container">
    <div class="child">
        Hello i(red color div) should be cenetered in vertical direction
    </div>
</div>

JSFIDDLE

解决方案

Margins in percentage are calculated according to the width of the container. see here

Percentages refer to the width of the containing block

(refering to margins)

So you can't use margins to verticaly center in CSS (except if you have fixed heights for conatiner and child).

---

To achive your goal

You can use absolute positioning

CSS for the child to verticaly center:

position:absolute;
top:25%;
left:0;
height:50%;
width:100%;

FIDDLE

In this fiddle I also made the scrollbars disapear by adding

body,html{
    margin:0;
    padding:0;
}

这篇关于父母和孩子的身高都可以以百分比表示吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！