How to center block body foundation 6?

Question

I created a base.html page to extend to my other pages but, no matter what I try, I cannot center the content within the {% block body %} Does anybody can see where is the problem? I am using foundation 6, and haven't edit anything in app.css. Let me know if you need more info.

{% block body %}

<div class="row">
    <div class="large-3 large columns"></div>
        <div class="large-6 large-centered columns">

            <h1>CONTENT FROM OTHER PAGES</h1>
            <p>Here is some content.</p>

        </div>
<div class="large-3 large columns"></div>
</div>

{% endblock %}

Answer 1

If you're using Foundation 6 then I advise you to dump the float and flex grids and start using the xy-grids, it comes already with helper classes to make what you're trying to do.

{% block body %}
<div class="grid-container">
    <div class="grid-x align-center">
            <div class="shrink cell">

                <h1>CONTENT FROM OTHER PAGES</h1>
                <p>Here is some content.</p>

            </div>
    </div>
</div>

{% endblock %}

Make sure you have a single cell using shrink within the container (shrink forces the cell to use as less space as possible), so all content is centered and the div.grid-x.align-center will do the rest (it will center all the cells within the container effectively creating a single centered cell).

There's so much more to do, just make sure you use the LATEST FOUNDATION COMPILATION (super important to use at least foundation 6.4.1)