如何将 div 从外部 div 顶部的偏移量设置为与仅使用 css 的外部 div 侧面的偏移量相同？

Question

所以我做了一个我想做的模型，这样更容易理解。我有一个占页面 33% 的外部 div 和一个宽度为 50%（外部 div）的内部 div。外部 div 有一个“text-align: center;”样式，因此内部 div 每一侧的空间是外部 div 宽度的 25%。我想从页面顶部偏移内部 div，使其与顶部的距离与两侧的距离相同。大多数对类似问题的回答都建议使用 jquery，但如果有的话，我更愿意使用仅 css 的解决方案。我该怎么做？

如果这是一个基本问题，我深表歉意。我对前端缺乏经验，找不到任何方法将 CSS 属性设置为等于其他属性的值。

任何帮助将不胜感激！

CSS：

    .side{
        background-color: #ECEFF1;
        height: 100%;
        width: 33%;
        text-align: center;

    }

    .profpic{
        width: 50%;
        border-radius: 50%;
        position: relative;

    }

HTML：

        <div class="side mdl-shadow--4dp" >
            <image class="profpic mdl-shadow--4dp" src="/profpic.jpg"></image>

        </div>
        <div class="content">

        </div>

Answer 1

只需输入以下两条 CSS 规则即可实现这一点：padding: 25% 和 width: 50%。这将使图像从左侧、顶部和右侧平均居中。这是我使用的代码：

HTML

<div id="side">
    <image src="http://placehold.it/120x120&text=image1" id="box">
</div>

CSS

#side {
    width: 33.33%;
    height: 1000px;
    background-color: #474747;
}

#box {
    width: 50%;
    padding: 25%;
}

如果你愿意的话，然后是JSFIDDLE。

---

编辑

为了更相关的问题，这就是 OP 的 CSS：

.side{
    background-color: #ECEFF1;
    height: 100%;
    width: 33%;
}

.profpic{
    width: 50%;
    border-radius: 50%;
    padding: 25%;
}

Answer 2

从 CSS3 开始，您可以使用单位 vw 和 vh 来实现此目的。

vh 指的是视口的高度，vw 指的是它的宽度。

您的div 占用33% 的宽度，而内框50% 的宽度。因此，您的左右边距约为外部 div 宽度的25%。

因此，您需要作为顶部边距的是 33% * 25% = 8.25% 的 vw 单元：

<div id="outer">
    <div id="inner">
        lorem ipsum
    </div>
</div>

#outer{
  background-color:red;    
  width:33vw;  
  margin:0;
  padding-top:1px;
  height:100vh;
}

#inner{
    background-color:blue;
    width:50%;
    margin: 0 auto;
    margin-top:8.25vw; // this is 25% of 33% width
    padding-top:1px;
}

http://jsfiddle.net/xaLc4zd2/

调整窗口大小，看看内部 div 如何保持其相对位置。

Answer 3

这应该作为您需要的参考。关键是将 box-sizing 应用于 33% 的容器，并将 25% 的边距应用于容器内的元素。

<div class="box">
  <div class="innerbox"></div>
</div>
<div class="box">
  <div class="innerbox"></div>
</div>
<div class="box">
  <div class="innerbox"></div>
</div>


.box{
  width: 33%;
  min-height:400px;
  background-color: #777;
  display: inline-block;
  box-sizing: border-box;
}

.innerbox{
  width:50%;
  margin:25%;
  min-height:200px;
  background-color: #444;
}

看到这个codepen example