CSS 如何在布尔玛中垂直居中元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44897794/
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 elements in Bulma?
提问by Ajit
How can I vertically center this <div class="columns is-vcentered">to that red colored section which is enclosing it?
我怎样才能<div class="columns is-vcentered">将它垂直居中到包围它的红色部分？
And should I remove or add some classes here to improve this code? Please suggest me. Thanks!
我应该在此处删除或添加一些类来改进此代码吗？请建议我。谢谢！
I am new to CSS framework, never tried Bootstrap and instead opted for Bulma.
我是 CSS 框架的新手，从未尝试过 Bootstrap，而是选择了 Bulma。
<section id="eyes" class="section">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<h1>Eyes on what matters</h1>
<p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
</div>
<div class="column">
<img class="image" src="img/roll.jpg" alt="">
</div>
</div>
</div>
</section>
In CSS apart from coloring elements, I've only done this:
在 CSS 中，除了着色元素之外，我只做过这样的事情：
section {
height: 70vh;
}
回答by ippi
I think it's a bit funny that .columnsdoes not have display:flex;by default (should it have perhaps?). Anyway, if you use something that adds flex, for example:
我认为默认情况下.columns没有display:flex;（它应该有吗？）有点有趣。无论如何，如果您使用添加了 flex 的东西，例如：
class="columns is-desktop is-vcentered"
then you get display:flexfrom is-desktopand now suddenly is-vcenteredworks as intended.
然后你display:flex从is-desktop现在突然is-vcentered按预期工作。
Also I think the semantics is off since is-vcenteredsuggests that it is columnsthat gets vertically centered. But what it actually does (from source):
另外我认为语义是关闭的，因为is-vcentered它表明它是columns垂直居中的。但它实际上做了什么（来自来源）：
.columns.is-vcentered {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
is to make children of columnsto be vertically centered inside columns. So you likely also need to set a height of your columnselement for this to work.
是让孩子在columns里面垂直居中columns。因此，您可能还需要设置columns元素的高度才能使其正常工作。
I think is-vcenteredshould be named something like has-vcentered-content, but perhaps I'm missing something obvious.
我认为is-vcentered应该命名为类似has-vcentered-content，但也许我错过了一些明显的东西。
tl;dr; Add height and flex to the columns-element for is-vcenteredto do something.
tl;博士; 为columns-element添加高度和 flexis-vcentered以执行某些操作。
Sorry, I guess this is more of a extrapolation of the problem and not a solution.
抱歉，我想这更像是对问题的推断，而不是解决方案。
I believe the real solution is probably to use the existing hero-classhere. (Which by the way centers manually using paddings, just like in Peter Leger's answer!).
我相信真正的解决方案可能是在这里使用现有的英雄类。（顺便说一下，使用填充手动居中，就像在 Peter Leger 的回答中一样！）。
回答by Sun
The columns are not vertically centered because you have used a height for the section. Usepaddingto increasethe height.
列未垂直居中，因为您为该部分使用了高度。使用填充到增加的高度。
Remove the class .section(in Bulma)
删除课程.section（在布尔玛中）
.section {
background-color: white;
padding: 3rem 1.5rem;
}
and use your own padding.
并使用您自己的填充。
Example
例子
.red-bg {
background: red;
}
.orange-bg {
background: orange;
}
section {
padding: 100px 15px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css" rel="stylesheet" />
<section class="red-bg">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<h1>Eyes on what matters</h1>
<p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
</div>
<div class="column">
<img class="image" src="http://placehold.it/400x300" alt="">
</div>
</div>
</div>
</section>
<section class="orange-bg">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<img class="image" src="http://placehold.it/400x300" alt="">
</div>
<div class="column">
<h1>Eyes on what matters</h1>
<p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
</div>
</div>
</div>
</section>
<section class="red-bg">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<h1>Eyes on what matters</h1>
<p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
</div>
<div class="column">
<img class="image" src="http://placehold.it/400x300" alt="">
</div>
</div>
</div>
</section>POSTSCRIPT
后记
You can use .columns is-vcenteredtwo times. In that case you can set an height for the section.
您可以使用.columns is-vcentered两次。在这种情况下，您可以为该部分设置一个高度。
section {
height: 70vh;
padding: 15px;
}
.red-bg {
background: red;
}
.orange-bg {
background: orange;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css" rel="stylesheet" />
<section class="columns is-vcentered is-centered red-bg">
<div class="container">
<div class="columns is-vcentered is-centered">
<div class="column">
<h1>Eyes on what matters</h1>
<p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
</div>
<div class="column">
<img class="image" src="http://placehold.it/400x300" alt="">
</div>
</div>
</div>
</section>
<section class="columns is-vcentered orange-bg">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<img class="image" src="http://placehold.it/400x300" alt="">
</div>
<div class="column">
<h1>Eyes on what matters</h1>
<p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
</div>
</div>
</div>
</section>
<section class="columns is-vcentered red-bg">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<h1>Eyes on what matters</h1>
<p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
</div>
<div class="column">
<img class="image" src="http://placehold.it/400x300" alt="">
</div>
</div>
</div>
</section>回答by vpibano
Update: I came here from googling a way to verticallyalign items inside .contentnot .columnclass. Other's might stumble on this place with the same reason.
更新：我来到这里是通过谷歌搜索一种在非类中垂直对齐项目的方法。其他人可能会出于同样的原因偶然发现这个地方。.content.column
If you're trying to vertically align elements inside .contentclass, here's what I did:
如果你想在.content类中垂直对齐元素，这就是我所做的：
.content.is-vcentered {
display: flex;
flex-wrap: wrap;
align-content: center; /* used this for multiple child */
align-items: center; /* if an only child */
}
Note: This is quite useful for div's that has fixed height.
注意：这对于div具有固定高度的 's非常有用。
Here's a an example html structure that it worked on
这是它处理的一个示例 html 结构
<div class="content is-vcentered has-text-centered">
<h1>Content</h1>
<p>that might be from</p>
<p>wysiwyg containing</p>
<p>multiple lines</p>
</div>
<div class="content is-vcentered">
<p>Some text line</p>
</div>
Here's a sample jsfiddle
这是一个示例jsfiddle
回答by RedDree
Just add .is-flexclass on the div.columnsand both .is-centeredand .is-vcenteredwill be available (Bulma v.0.7.1):
只需添加.is-flex在类div.columns和两个.is-centered和.is-vcentered将可用（布尔玛v.0.7.1）：
https://bulma.io/documentation/modifiers/responsive-helpers/
https://bulma.io/documentation/modifiers/responsive-helpers/
Here's my fully working example with a component centered in the screen:
这是我的完整工作示例，其中一个组件位于屏幕中央：
<template>
<div class="columns is-flex is-vcentered is-centered">
<div class="column is-two-thirds-mobile is-half-tablet">
<Login />
</div>
</div>
</template>
回答by Tovi Newman
A little late to the party but I think the best solution in this case is to use margin: auto;.
聚会有点晚了，但我认为在这种情况下最好的解决方案是使用margin: auto;.
