CSS 中的基本垂直居中在浮动元素上表现异常

Question

所以我开始遵守这 3 个 CSS 规则，几乎总是垂直居中任何块级元素：

  .vertically-center {
    position: relative;
    top: 50%;
    transform: translateY( -50% );
  }

经常有效。但是对于我正在构建的这个特定布局，它会将元素推得太高（部分离开屏幕），我不知道为什么。

这是在将我的 vertically-center class 添加到我的 portrait-container div 之前的样子：

这个代码片段是将 vertically-center class 添加到 portrait-container div 后的样子：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.vertically-center {
  position: relative;
  top: 50%;
  transform: translateY( -50% );
}

body {
  overflow: hidden;
}
main {
  padding-top: 50px;
  background: #fafafa;
  text-align: left;
}
.portrait-container {
  float: left;
}
img {
  width: 150px;
  border-radius: 50%;
}
.about-container {
  width: 70%;
  float: right;
}

<main class="clearfix">
  <div class="portrait-container vertically-center">
    <img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko">
  </div>

  <div class="about-container">
    <h3>About</h3>
    <p>
      Hi, I'm John Lesko! This is my art portfolio where I share all 
      of my favorite work. When I'm not creating things, I enjoy excercising,
      playing video games, drinking good Kool Aid, and more.
      
      <br><br> If you'd like to follow me on Twitter, my username is 
      <a href="http://twitter.com">@jletsgo</a>.
    </p>
  </div>
</main>

我只希望图像容器垂直居中，而不管其父容器的高度如何。帮助？检查元素没有给我任何见解。

编辑：只是为了展示这在过去一直对我有用。这是一个 jsfiddle：https://jsfiddle.net/9kyjt8ze/4/。为什么它对我有用而不是在这里？

相关问题：

Answer 1

更新

Edit: Just to show how this has always worked for me in the past. Here is a jsfiddle: https://jsfiddle.net/9kyjt8ze/4/. Why does it work for me there and not here?

黑色圆圈是 Fiddle 中唯一的元素，没有任何障碍物。在您遇到问题的代码中，您有许多元素挡在路上或包裹在其他元素周围。如果您开始剥离层，您的规则集就会起作用。或者您可以根据代码段 1 添加属性并更改另一个属性。

一个重要说明 relative 元素实际上占据了原始位置，因此如果给定 left:40px 它 看起来 是向左移动了 40px，但实际上它仍然占据了它看起来所在位置右侧的 space 40px。所以 relative 元素与 static 元素的流并不真正不同。因此它们受 static 布局的影响，只是通常不明显，因为它们与 z-index.

堆叠

片段 2 是一个交互式演示，我认为这可能有助于更好地解释事情。

3 CSS 规则集是垂直对齐元素的常用方法，但它最初是 position: absolute 而不是 position:relative 如果我记得的话，它必须在另一个 positioned 元素中正确。

参考资料

解决方案

.vertically-center {
  /* Changed to absolute from relative */
  position: absolute;
  top: 50%;
  transform: translateY( -50% );
}
main {
  /* Added position: relative */
  position: relative;
  padding-top: 50px;
  background: #fafafa;
  text-align: left;
}

片段 1

.vertically-center {
  position: relative;
  top: 50%;
  transform: translateY( -50%);
}

body {}

main {
  padding-top: 50px;
  overflow: scroll;
  background: #fafafa;
  text-align: left;
}

img {
  width: 150px;
  border-radius: 50%;
  float: left;
}

.about {
  width: calc(100% - 150px);
  float: right;
}

<main class="clearfix">

  <img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko" class="vertically-center">


  <article class="vertically-center about">
    <h3>About</h3>
    <p>
      Hi, I'm John Lesko! This is my art portfolio where I share all of my favorite work. When I'm not creating things, I enjoy excercising, playing video games, drinking good Kool Aid, and more.</p>

    <p>If you'd like to follow me on Twitter, my username is
      <a href="http://twitter.com">@jletsgo</a>.
    </p>
  </article>
</main>

片段 2

$('#b1').click(function() {
  $('body').toggleClass('R S');
});

$('#b2').click(function() {
  $('#N1,#N2,#N3').toggleClass('N M');
});

$('input[id$="2"]').on('input', function() {
  var grp = "." + $(this).attr('class');
  var num = parseInt($(this).val(), 10);
  grp !== '.S' ? $('section' + grp).css('left', num + '%') : $('section.S').css('margin-left', num + '%');
});

$('input[id$="3"]').on('input', function() {
  var grp = "." + $(this).attr('class');
  var num = parseInt($(this).val(), 10);
  grp !== '.S' ? $('section' + grp).css('top', num + '%') : $('section.S').css('margin-top', num + '%');
});

html,
body {
  height: 100%;
  width: 100%;
}

body {
  overflow: scroll;
  font: 400 12px/1.2 Consolas;
}

section {
  width: 50px;
  height: 150px;
  border: 2px dashed grey;
  text-align: center;
  color: white;
}

.R {
  position: relative;
  background: rgba(0, 0, 255, .3)
}

.A {
  position: absolute;
  background: rgba(255, 0, 0, .3)
}

.F {
  position: fixed;
  background: rgba(0, 255, 0, .3)
}

.S {
  position: static;
  background: rgba(122, 122, 0, .3)
}

.N {
  position: absolute;
  background: yellow;
  color: blue;
}

.M {
  position: relative;
  background: black;
  color: yellow;
}

#R1 {
  left: 20%;
  top: 3%;
  z-index: 1;
}

#A1 {
  left: 42%;
  top: 44%;
  z-index: 2;
}

#F1 {
  right: 20%;
  top: 44%;
  z-index: 3;
}

#S1 {
  margin-left: 0;
  margin-top: -28%;
}

#N1 {
  bottom: 0;
  right: 0;
  width: 25px;
  height: 80px;
  z-index: 4;
}

input {
  width: 6ex;
  position: static !important;
}

button {
  font: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class='S'>
  <fieldset>
    <button id='b1'>Body Relative/Static</button>
    <button id='b2'>Nested Absolute/Relative</button>
    <br><br> RLeft
    <input id='R2' class='R' type='number' value='20'> RTop
    <input id='R3' class='R' type='number' value='3'> ALeft
    <input id='A2' class='A' type='number' value='44'> ATop
    <input id='A3' class='A' type='number' value='44'><br> FLeft
    <input id='F2' class='F' type='number' value='64'> FTop
    <input id='F3' class='F' type='number' value='44'> SLeft
    <input id='S2' class='S' type='number' value='0'> STop
    <input id='S3' class='S' type='number' value='-28'><br> NLeft
    <input id='N2' class='N' type='number' value='45'> NTop
    <input id='N3' class='N' type='number' value='45'>

  </fieldset>

  <section id='R1' class='R'>RELATIVE
    <section id='N1' class='N'>N<br>E<br>S<br>T<br>E<br>D</section>
  </section>
  <section id='A1' class='A'><br><br><br>ABSOLUTE</section>
  <section id='F1' class='F'><br><br>FIXED</section>
  <section id='S1' class='S'><br><br><br><br><br>STATIC</section>
</body>

Answer 2

你的 CSS 不错，但我不适应。所以这是另一种解决方法，也许它也有帮助。它总是将图像垂直居中，并且与右侧的 box 有多少文本无关。彩色边框只是为了帮助显示框尺寸的视觉效果。

* {
  box-sizing: border-box;
}

.portrait-container {
  position: relative;
  margin: 20px 0;
}

.portrait-container:after {
  content: '';
  display: block;
  clear: both;
}

.portrait-container img {
  position: absolute;
  top: calc(50% - 80px); /* 50% from top minus half img height*/
  width: 150px;
  height: 160px;
  border-radius: 50%;
  float: left;
}

.portrait-container {
  border: solid 2px orange;
}

.portrait-container .about-container {
  border: solid 2px green;
  padding: 0 50px;
  margin-left: 150px;        /* this elements should be at least 150px away from left side */
  width: calc(100% - 150px); /* the max width this element should have to be placed */
                             /* next to the image is the total width(100%) - the image width  */
}

<main>
  <div class="portrait-container">
    <img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko">

    <div class="about-container">
      <h3>About</h3>
      <p>
        Hi, I'm John Lesko! This is my art portfolio where I share all 
        of my favorite work. When I'm not creating things, I enjoy excercising,
        playing video games, drinking good fruit punch, and more.

        <br><br> If you'd like to follow me on Twitter, my username is 
        <a href="http://twitter.com">@jletsgo</a>.
      </p>
    </div>
  </div>
</main>

<main>
  <div class="portrait-container">
    <img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko">

    <div class="about-container">
      <h3>About</h3>
      <p>
        Hi, I'm John Lesko! This is my art portfolio where I share all 
        of my favorite work. When I'm not creating things, I enjoy excercising,
        playing video games, drinking good fruit punch, and more.

        <br><br> If you'd like to follow me on Twitter, my username is 
        <a href="http://twitter.com">@jletsgo</a>.
      </p>
      <p>
        Hi, I'm John Lesko! This is my art portfolio where I share all 
        of my favorite work. When I'm not creating things, I enjoy excercising,
        playing video games, drinking good fruit punch, and more.

        <br><br> If you'd like to follow me on Twitter, my username is 
        <a href="http://twitter.com">@jletsgo</a>.
      </p>
    </div>
  </div>
</main>

Answer 3

您可以通过 flexbox 使用更少的代码来实现此目的。下面的代码可以解决问题。

.clearfix {
  display: flex;
  align-items: center;
}
img {
  width: 150px;
  border-radius: 50%;
}
.about-container {
  width: 70%;
  padding-left: 30px;
}

在codepen中查看http://codepen.io/anon/pen/OWYxrb

CSS 中的基本垂直居中在浮动元素上表现异常

Basic vertical center in CSS behaving strangely on floated element

html

css

css-position

vertical-alignment