Best approach to center items horizontally on Bulma - css

Question

I want to have a section that's three fifths columns wide, and that it will be centered.
At first when I only had "section", the content was horizontally centered, but it took the entire width of the screen. So I added a parent div of columns with a column of is-three-fifths. Now I have a section that is three-fifths wide, but not centered, so what is the best approach to do that?
.section{
border: 1px solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="columns">
<div class="column is-three-fifths">
<section class="section">
<div class="container">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/256x256.png">
</figure>
</div>
</section>
</div>
</div>

Answer 1

Add margin: auto; on figure tag
.section{
border: 1px solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="columns">
<div class="column is-three-fifths">
<section class="section">
<div class="container">
<figure class="image is-128x128" style=" margin: auto;">
<img src="https://bulma.io/images/placeholders/256x256.png">
</figure>
</div>
</section>
</div>
</div>

Answer 2

You can add is-centered class to div.columns. https://bulma.io/documentation/columns/options/#centering-columns
.section{
border: 1px solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="columns is-centered">
<div class="column is-three-fifths">
<section class="section">
<div class="container">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/256x256.png">
</figure>
</div>
</section>
</div>
</div>