垂直对齐：Flexbox的VS表上的元素/表细胞与未知高度

我建立一个CMS中的某个网站。有相当多的元素需要垂直居中的内容。但是，由于我没有最终的内容（以及将来会改变什么内容），我无法为这些容器设置固定的高度。垂直对齐：Flexbox的VS表上的元素/表细胞与未知高度

我只花了好几分钟试图找出为什么我的元素不会使用Flexbox的垂直对齐......直到我发现它是没有固定的高度。

在过去我建立使用显示这样的布局：表/表细胞组合。我最近开始越来越多地使用flexbox模型，并开始喜欢这些模型，宁愿停止使用table/table-cell。

现在我不知道如何（或者如果）我可以使用Flexbox的垂直对齐的内容，无论容器会产生什么样的高度。

2016-01-15 The Gmo

的可能的复制[Flexbox的：中心的水平和垂直（http://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically） – LGSon

总是有用的：[ CSS技巧指南flexbox]（https：// css-tricks。com/snippets/css/a-guide-to-flexbox /）和[Ph。 Walton - flexbugs]（https://github.com/philipwalton/flexbugs） – FelipeAls

如果你的Flex容器是flex-direction: row（默认方向），垂直中心内容，您可以使用：

align-items: center; /* for a single line of flex items */ 
align-content: center; /* for multiple lines of flex items */

如果你的Flex容器flex-direction: column，垂直中心内容，您可以使用：

justify-content: center;

这些方法的工作，而不需要定义任何的高度。

有关详细信息，插图和现场演示，请参阅我的答案在这里：https://stackoverflow.com/a/33049198/3597276

从这个问题的答案：

下面是两个普通定心的解决方案。一个用于垂直对齐弹性项目（flex-direction: column），另一个用于水平对齐弹性项目（flex-direction: row）。在这两种情况下，居中divs的高度可以是可变的，未定义的，未知的，无论如何。居中div的高度并不重要。

来源

2016-01-15 11:33:24

垂直居中的内容（或完全居中），你可以使用CSS transform与translate财产。用这种方法，你不需要知道元素的大小，并与相对的父亲结合，就可以获得完美的垂直中心或水平中心。看到的片段：

.relative { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 300px; 
 
    background-color:yellow; 
 
    border: 1px solid black; 
 
    margin: 20px 0; 
 
} 
 

 
.relative .center { 
 
    position: absolute; 
 
    background-color: black; 
 
    color: white; 
 
    width: 120px; 
 
    height: 150px; 
 
} 
 

 
.relative .center.vertical { 
 
    top: 50%; 
 
    -ms-transform: translateY(-50%); /* ie9/ie10 */ 
 
    -webkit-transform: translateY(-50%); /* safari ios */ 
 
    transform: translateY(-50%); /* standard */ 
 
} 
 
.relative .center.horizontal { 
 
    left: 50%; 
 
    -ms-transform: translateX(-50%); 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
} 
 
.relative .center.total { 
 
    top: 50%; 
 
    left:50%; 
 
    -ms-transform: translate(-50%, -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}

<div class="relative"> 
 
    <div class="center vertical">Vertical center</div> 
 
</div> 
 

 
<div class="relative"> 
 
    <div class="center horizontal">Horizontal center</div> 
 
</div> 
 

 
<div class="relative"> 
 
    <div class="center total">Total center</div> 
 
</div>

来源

2016-01-15 11:34:37

我建议你同时使用，这样，由于尚有一些IE8/9的用户那里，这个后备变异将使他们工作太。

以及需要前缀或使用旧的Flexbox的模型（如IE10，Safari8/7/6和一些移动版本，如Android，黑莓，UC浏览器），表中的版本踢其他较旧版本的浏览器。More on flexbox support here

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
.parent { 
 
    display: table; 
 
    display: flex; 
 
    justify-content: center; 
 
    
 
    /* for this demo */ 
 
    width: 50%; 
 
    height: 50%; 
 
    border: 1px solid black; 
 
} 
 

 
.child { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    display: flex; 
 
    align-items: center; 
 
}

<div class="parent"> 
 
    <div class="child">Centered<br>content</div> 
 
</div>

来源

2016-01-15 11:52:22 LGSon

垂直对齐：Flexbox的VS表上的元素/表细胞与未知高度

回答

相关问题