Question

我使用transform: translateY(50%)在其父级的底部边缘垂直居中了一个元素。

我遇到的问题是当元素向下平移高度的一半时，此部分之后的任何内容都不会被降低相同的数量。当然，所有高度都是基于内容自动生成的，所以我不能只将一些任意的边距/最高值应用到下一部分。

这对于Javascript来说真的很容易，但我宁愿避免使用Javascript来渲染布局，以避免在内容或视口发生变化时重新计算。

这是笔：http://codepen.io/danielvdspuy/pen/KMMOMW

Markup（Jade）：

header
  .b-hero
    .b-wrapper.b-intro
      .b-welcome 
        h1.b-welcome__heading Supercharge your talent
        p.b-welcome__message We create electrifying content for editorial titles or brands, and provide cutting-edge training courses
        .b-testimonials
          p.b-testimonials__quote “Dashboard Media is the best kept secret in training. The team is always happy to tailor a course to our needs.”
          p.b-testimonials__byline 
            | Jess McAree 
            br 
            | Group Head of Editorial Learning
            br
            | Haymarket Media
  .b-section.b-wrapper
    p You can’t see me, because I’m being covered =(

样式（手写笔）：

*
  box-sizing         border-box

body
  background-color   rgba(255,255,255,1)
  font-family        sans-serif
  color              white
  line-height        150%

h1
  margin             0 0 0.5em 0
p
  margin             0

header
  background-color   rgba(0,0,0,0.05)
  position           absolute
  top                1em
  right              1em
  bottom             1em
  left               1em

.b-hero
  background-color   rgba(0,0,0,0.1)
  height             15em

.b-wrapper
  position           relative
  height             100%
  margin             0 auto
  max-width          1000px
  display            flex
  align-items        flex-end

.b-welcome, .b-testimonials
  padding            3em

.b-welcome
  background-color   rgb(0,141,62)
  background         linear-gradient(to right,
                     rgb(0,141,62) 0%, 
                     rgb(139,197,63) 100%)
  width              100%
  padding-right      calc(35%+3em)
  transform          translateY(50%)

.b-testimonials
  background-color   rgb(30,30,30)
  width              35%
  position           absolute
  bottom             0
  right              0

谢谢！

Answer 1

如何使这项工作在很大程度上取决于该页面应该有什么。

假设它是居中的和文本（当然可以包含图像，更多文本等），可以这样做，其中第二个div嵌套在居中的div中，position: absolute为将它推到底部并从那里生长。

Fiddle demo

＆＃13;

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
}
body {
  font: 21px/24px Courier New;
  color: #fff;
  text-align: center;
  background-color: #0068b3;
}
.wrapper {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}
.hero {
  height: 50vh;
  background-color: #2f3440;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.blurb {
  background-color: rgba(254,199,0,0.85);
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
  position: relative;
  z-index: 10;
}
.pad {
  padding: 20px;
}
.text {
  position: absolute;
  top: 100%;
}

＆＃13;

<section class="hero">
  <div class="blurb wrapper pad">“But we shouldn't use our humility as an excuse for inaction. In Washington, they call this the Ownership Society, but what it really means is - you're on your own. America, now is not the time for small plans. America, we cannot turn back. The United States does not accept the legitimacy of continued Israeli settlements.” —Barack Obama

    <div class="text wrapper pad">Text in this section is now covered by above element. It needs to move down by the same amount so the spacing is correct (prior to adding padding)</div>    
  </div>
</section>

＆＃13;

跟随翻译（转换）元素的偏移空间

1 个答案: