垂直中心内容

如何在Bootstrap中垂直居中整个内容？我有两排。我已经尝试使用display：table-cell，但行保留在同一行（对于单词笑话抱歉）。垂直中心内容

HTML

<div class="container container-table"> 
    <div class="row vertical-center"> 
     [...] 
    </div> 
    <div class="row vertical-center"> 
     [...] 
    </div> 
</div>

CSS

html, body, .container-table { 
    height: 100%; 
} 

.container-table { 
    display: table; 
} 

.vertical-center { 
    display: table-cell; 
    vertical-align: middle; 
}

什么建议吗？

来源

2017-03-23 Jumpa

我不知道我在正确认识你，但你尝试'显示：弯曲; align-items：center; justify-content：center;'on.container'或'.container-table' – Jack

你是什么意思的垂直中心？ – neophyte

或者：http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 – ZimSystem

尝试在一个单一的“纵向中心”容器包装的两行。

<div class="container container-table"> 
    <div class="vertical-center"> 
    <div class="row"> 
     [...] 
    </div> 
    <div class="row"> 
     [...] 
    </div> 
    </div> 
</div>

See fiddle

来源

2017-03-23 17:47:15

你可以试试，

.content-table{ 
    position: relative; 
    transform: translateY(-50%); 
    top: 50%; 
    display: block; 
    }

无需显示表细胞

来源

2017-03-23 17:46:20

垂直中心内容

回答

相关问题