twitter-bootstrap 如何在引导程序 3 中垂直居中文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40903348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically center text in bootstrap 3?
提问by Phoenix
Edited for better understanding:
编辑以便更好地理解：
html,body {
height:100%;
padding:0;
}
#home {
color: black;
background-color: rgba(0, 0, 0, 0);
background-repeat: no-repeat;
background-image: url(../images/bg-1.jpg);
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
opacity: 1;
visibility: inherit;
min-height:100%;
}
#home .vcenter {
vertical-align: middle;
display: inline-block;
float: none;
border: 1px solid white;
}<section id="home">
<div class="container-fluid">
<div class="row">
<div>
<h1 class="text-center vcenter">Heading</h1>
<h3 class="text-center vcenter">Sub Heading</h3>
</div>
</div>
</div>
</section>I have tried the above but it's not working. I have used min-height in section id because i want the bg image to be full screen as per screen size but the text is not vertically and horizontally center.
我已经尝试了上述方法，但它不起作用。我在部分 id 中使用了 min-height，因为我希望 bg 图像按照屏幕尺寸全屏显示，但文本不是垂直和水平居中。
I want the text to appear center of page according to screen size.
我希望文本根据屏幕大小显示在页面中心。
I want the headings to go where its written 1920x1080.
我希望标题去到它写的 1920x1080 的地方。
Thanks!
谢谢！
回答by claudios
Just replace the vcenterclass to pagination-centered. That should work. And adjust padding on top. No need to add custom dirty css to get things done.
只需将vcenter类替换为pagination-centered. 那应该有效。并在顶部调整填充。无需添加自定义的脏 css 即可完成任务。
.section-content {
padding-top: 10%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="header">
<div class="container-fluid">
<div class="row">
<div class="section-content">
<h1 class="text-center pagination-centered">Heading</h1>
<h3 class="text-center pagination-centered">Sub heading</h3>
</div>
</div>
</div>
</section>Or if you wanted it to be vertically centered on all screen sizes:
或者，如果您希望它在所有屏幕尺寸上垂直居中：
.section-center__full {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="header">
<div class="container-fluid">
<div class="row">
<div class="section-center__full">
<h1 class="text-center">Heading</h1>
<h3 class="text-center">Sub heading</h3>
</div>
</div>
</div>
</section>回答by Mohammad Usman
There can be many possible variants for this.
为此可以有许多可能的变体。
Method # 01:
方法#01：
Use css3 flexbox. You can use following HTMLstructure for this. In my opinion .container-fluid, .rowand divinside .rowis excess in this case.
使用 css3 flexbox。您可以HTML为此使用以下结构。在我看来.container-fluid，在这种情况下.row，div里面.row是多余的。
<section id="header">
<h1 class="vcenter">Heading</h1>
<h3 class="vcenter">Sub heading</h3>
</section>
And following css:
以及以下css：
#header {
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
}
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#header {
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
}
#header .vcenter {
margin: 0;
}<section id="header">
<h1 class="vcenter">Heading</h1>
<h3 class="vcenter">Sub heading</h3>
</section>Method # 02:
方法#02：
Use table properties. For this however you will need one more wrap. Use following HTMLstructure:
使用表属性。但是，为此，您将需要再包装一次。使用以下HTML结构：
<section id="header" class="text-center">
<div>
<h1 class="text-center vcenter">Heading</h1>
<h3 class="text-center vcenter">Sub heading</h3>
</div>
</section>
And following css:
以及以下css：
#header {
display: table;
height: 100vh;
width: 100%;
}
#header > div {
vertical-align: middle;
display: table-cell;
}
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#header {
display: table;
height: 100vh;
width: 100%;
}
#header > div {
vertical-align: middle;
display: table-cell;
}
#header .vcenter {
vertical-align: middle;
display: inline-block;
margin: 0;
}<section id="header" class="text-center">
<div>
<h1 class="vcenter">Heading</h1>
<h3 class="vcenter">Sub heading</h3>
</div>
</section>回答by Manish Patel
You try using position:absoluteto you center div and give 100vhheight to your main div.
您尝试使用 position:absolute居中 div 并100vh为主 div提供高度。
body {
margin: 0;
}
#header {
width: 100%;
background: #333;
height: 100vh;
position: relative;
}
#header .vcenter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
z-index: 10;
}
#header .vcenter h1 {
margin-top: 0;
}<section id="header">
<div class="container-fluid">
<div class="row">
<div class="vcenter">
<h1 class="text-center">Heading</h1>
<h3 class="text-center">Sub heading</h3>
</div>
</div>
</div>
</section>回答by Santosh Khalse
Please try this code.
请试试这个代码。
html,body {
height:100%;
padding:0;
}
#home {
color: black;
background-color: rgba(0, 0, 0, 0);
background-repeat: no-repeat;
background-image: url(../images/bg-1.jpg);
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
opacity: 1;
visibility: inherit;
min-height:100%;
}
#home .vcenter {
vertical-align: middle;
display: inline-block;
float: none;
border: 1px solid white;
}
section{
height:100%;
display:flex;
align-items:center;
align-content:center;
}<section id="home">
<div class="container-fluid">
<div class="row">
<div>
<h1 class="text-center vcenter">Heading</h1>
<h3 class="text-center vcenter">Sub Heading</h3>
</div>
</div>
</div>
</section>you can view codepen link http://codepen.io/santoshkhalse/pen/oYoKMP
您可以查看 codepen 链接http://codepen.io/santoshkhalse/pen/oYoKMP
