垂直對齊：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表上的元素/表細胞與未知高度

回答

相關問題