垂直居中未知高度

Posted 2023-03-05

【中文标题】垂直居中未知高度

【英文标题】：Vertical centering unknown height

【发布时间】：2013-03-01 18:46:58

【问题描述】：

我试图在没有固定/指定高度的 DIV 中垂直居中图像。我已经尝试在Centering in the unknown article on CSS Tricks 上进行构建，但要使其工作，您需要指定高度。而是欺骗性的文章标题。

这是我的 JS Fiddle：http://jsfiddle.net/6J2WA/

这就是我想要的（图片）：http://cl.ly/image/1k0h262c2c3s

CSS

/* This parent can be any width and height */
.block 
  text-align: center;


/* The ghost, nudged to maintain perfect centering */
.block:before 
  content: '';
  display: inline-block;
   height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */


/* The element to be centered, can
also be of any width and height */ 
.centered 
  display: inline-block;
  vertical-align: middle;



.inner 
max-width: 960px;
margin: 0 auto;
overflow: hidden;
    background: #ef4;


.c-3   
width: 29.3%;
float: left;
margin-left: 6%;
    background: #e4f;


#you-and-us .c-3  width: 33.5%; 
#you-and-us .c-3:first-child  text-align: right; margin: 0; 
#you-and-us .c-3:nth-child(2)  width: 21%; text-align: center; position: relative; 

【问题讨论】：

***.com/questions/14123999/…

你真的想让中间的图片被粉色框包围吗？

@cimmanon 仅用于说明目的。

【参考方案1】：

你不能使用伪元素技术的原因是你没有足够的祖先元素是#you-and-us元素高度的100%。

如果你扔掉浮点数并使用display: table-cell 作为.c-3 元素，你可以简化整个事情。

http://jsfiddle.net/6J2WA/5/

/* This parent can be any width and height */
.block 
    text-align: center;


.inner 
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
    background: #ef4;


.c-3   
    display: table-cell;
    background: #e4f;


#you-and-us .c-3  width: 33.5%; 
#you-and-us .c-3:first-child  text-align: right; 
#you-and-us .c-3:nth-child(2)  width: 21%; text-align: center; position: relative; background: yellow; vertical-align: middle; 

【讨论】：

感谢您完成了这项工作，但是当我引入一个带有媒体查询的断点时，该断点基本上将这 3 列堆叠在一起，并在左侧浮动。当我让浏览器变大时，我得到了一些奇怪的结果，请参阅：cl.ly/image/0g3a2e0O1x2e 任何想法如何解决这个问题？

真的，这段代码应该在媒体查询中，将其限制为更大的视口（请参阅：mobile first）。对于较小的视口，您希望发生什么？

此代码是三列布局，但我也有 1、2 和 4 列布局。基本上，对于较小的视口，它们只是堆叠成一列。我首先熟悉移动设备并理解您的观点，但我该如何解决我目前遇到的问题？

如果您要提供的只是屏幕截图，我真的帮不了您。需要做的就是删除所有与这些元素相关的浮动，并在狭窄的视口中隐藏display: table-cell。窄的设备应该垂直堆叠，宽的设备应该是水平的。