I have 3 boxes stacked vertically using flexbox, currently positioned to the left. I am looking for a more elegant solution to center them horizontally without compromising the layout. I attempted using margin: 10px auto on a div which seemed awkward in the CSS. Are there any special flexbox properties that can achieve this more gracefully?
I want the divs to be centered.
section {
display: flex;
flex-direction: column;
background-color: teal;
}
div {
background-color: silver;
width: 200px;
margin: 10px;
line-height: 75px;
font-size: 30px;
}<section>
<div>apple</div>
<div>banana</div>
<div>pear</div>
</section>