How to vertically center elements in Bulma?
Solution 1
I think it's a bit funny that .columns
does not have display:flex;
by default (should it have perhaps?). Anyway, if you use something that adds flex, for example:
class="columns is-flex is-vcentered"
then you get display:flex
from is-desktop
and now suddenly is-vcentered
works as intended.
Also I think the semantics is off since is-vcentered
suggests that it is columns
that gets vertically centered. But what it actually does (from source):
.columns.is-vcentered {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
is to make children of columns
to be vertically centered inside columns
. So you likely also need to set a height of your columns
element for this to work.
I think is-vcentered
should be named something like has-vcentered-content
, but perhaps I'm missing something obvious.
tl;dr; Add height and flex to the columns
-element for is-vcentered
to do something.
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-class here. (Which by the way centers manually using paddings, just like in Peter Leger's answer!).
Solution 2
Update: I came here from googling a way to vertically align items inside .content
not .column
class. Others might stumble on this place with the same reason.
If you're trying to vertically align elements inside .content
class, here's what I did:
.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 have fixed height.
Here's an example html structure that it worked on
<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
Solution 3
Just add .is-flex
class on the div.columns
and both .is-centered
and .is-vcentered
will be available (Bulma v.0.7.1):
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>
Solution 4
A little late to the party but I think the best solution in this case is to use margin: auto;
.
Ajit
Updated on December 10, 2021Comments
-
Ajit over 2 years
How can I vertically center this
<div class="columns is-vcentered">
to that red colored section which is enclosing it?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.
<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:
section { height: 70vh; }
-
Čamo over 2 yearsThis works, but how to align items to the bottom? It seems there is no is-vbottom.
-
ippi over 2 years
is-flex-direction-column is-justify-content-flex-end
-
Čamo over 2 yearsYes I found it. Thanks.
-
Luke about 2 yearsWhere it should be used?
-
Tovi Newman about 2 yearsAdd it as an inline style to the element that you want to center. Or you can create a new class with that css property and then add your new class to the html element.