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

因此，我遵循以下3条CSS规则，它们几乎总是垂直居中于任何块级元素：

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

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

这是将my

垂直居中

类添加到my

纵向容器

div之前网页的外观：

将

垂直居中

类添加到

纵向容器

div后，该代码片段就是这样显示的：

.clearfix:after{
内容：“；
显示：块；
明确：两者皆有；
}
.垂直居中{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
身体{
溢出：隐藏；
}
主要{
填充顶部：50px；
背景：#fafafa；
文本对齐：左对齐；
}
.肖像容器{
浮动：左；
}
img{
宽度：150px；
边界半径：50%；
}
.关于集装箱{
宽度：70%；
浮动：对；
}

关于

嗨，我是约翰·莱斯科！这是我的艺术作品集，我分享所有
我最喜欢的作品之一。当我不创造东西的时候，我喜欢运动，
玩电子游戏，喝好酒，等等。


如果你想在Twitter上关注我，我的用户名是
.

更新

编辑：只是想说明这在过去一直对我有效。下面是一个JSFIDLE:。为什么它在那里对我有效而在这里不起作用

黑圈是小提琴中唯一的元素，没有障碍物。在您遇到问题的代码中，有许多元素挡住了它们，或者缠绕在其他元素周围。如果开始剥离层，则规则集将起作用。或者，您可以根据代码段1添加一个属性并更改另一个属性。

---

一个重要的注释一个

相对的

元素实际上占据了原始位置，因此如果给它一个

left:40px

，它看起来会向左移动40px，但实际上它仍然占据了它看起来所在位置右侧的40px空间。因此，

相对的

元素与

静态的

元素在流中并没有什么不同。因此，它们受

静态布局的影响，通常不明显，因为它们与
z-index
堆叠在一起

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

3CSS规则集是垂直对齐元素的常用方法，但它最初是
位置：绝对的
，而不是
位置：相对的
，如果我没记错的话，它必须位于另一个
位置
ed元素

参考






解决方案

.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


。垂直居中{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
主体{}
主要{
填充顶部：50px；
溢出：滚动；
背景：#fafafa；
文本对齐：左对齐；
}
img{
宽度：150px；
边界半径：50%；
浮动：左；
}
.关于{
宽度：计算（100%-150px）；
浮动：对；
}

.

你的CSS不错，但我没能接受。所以这里有另一种方法，你可以解决它，也许它也有帮助。它将始终使图像垂直居中，而不管右侧的
框有多少文本。彩色边框正好有助于显示框大小的视觉效果


*{
框大小：边框框；
}
.肖像容器{
位置：相对位置；
利润率：20px0；
}
.肖像容器：之后{
内容：''；
显示：块；
明确：两者皆有；
}
.肖像容器img{
位置：绝对位置；
顶部：计算（50%-80px）；/*50%从顶部减去一半img高度*/
宽度：150px；
高度：160px；
边界半径：50%；
浮动：左；
}
.肖像容器{
边框：纯色2倍橙色；
}
.肖像容器.关于容器{
边框：实心2倍绿色；
填充：0 50px；
左边距：150px；/*此元素应至少与左侧相距150px*/
宽度：计算（100%-150px）；/*此元素必须放置的最大宽度*/
/*图像旁边是总宽度（100%）——图像宽度*/
}

关于

嗨，我是约翰·莱斯科！这是我的艺术作品集，我分享所有
我最喜欢的作品之一。当我不创造东西的时候，我喜欢运动，
玩电子游戏，喝水果饮料等等。


如果你想在Twitter上关注我，我的用户名是
.

关于

嗨，我是约翰·莱斯科！这是我的艺术作品集，我分享所有
我最喜欢的作品之一。当我不创造东西的时候，我喜欢运动，
玩电子游戏，喝水果饮料等等。


如果你想在Twitter上关注我，我的用户名是
.


嗨，我是约翰·莱斯科！这是我的艺术作品集，我分享所有
我最喜欢的作品之一。当我不创造东西的时候，我喜欢运动，
玩电子游戏，喝水果饮料等等。


如果你想在Twitter上关注我，我的用户名是
.

您可以通过使用
flexbox
和更少的代码来实现这一点。下面的代码将实现这个技巧

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

在codepen中查看它
很有趣，谢谢。看起来很有效，但我以前从未使用过
absolute
定位或将其放置在其他定位元素中。我的代码中有一些东西打破了我原来的做法。从顶部开始有50像素的填充？是的，但是当我在chrome开发工具中删除填充时，布局仍然被破坏。只要