Horizontally and vertically center bootstrap 4 columns in consecutive rows

问题

I'm trying to simply center justify and align two bootstrap columns inside a container. The columns are in different rows.

The grid layout is

<body style="height: 100vh;">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="card">
                    hello
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-4">
                <div class="card">
                    world
                </div>
            </div>
        </div>
    </div>
</body>

the cards are just to outline the containers.

I'm aware there are MANY questions on vertical alignment, and I may have missed the one that contains the answer I need. But my take away from most of them is that the parent needs to have some height.
The following works just fine if you have only one row, because you can center the column in the 100% height row. But if you have two rows, it doesn't so well, since each column is centered in its own row, and the rows are each the height of the window.

<body style="height: 100vh;">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="col-6">
                <div class="card">
                    hello
                </div>
            </div>
        </div>
        <div class="row h-100 justify-content-center">
            <div class="col-4">
                <div class="card">
                    world
                </div>
            </div>
        </div>
    </div>
</body>

I wish I could just move the justify-content-center align-items-center up to the container, but alas that doesn't seem to do anything.

So, please help me, how can I place these flush, one on top of the other, smack in the middle of the screen?

回答1:

Here's a good way to do this using Bootstrap's build in flexboxes.

<div class="container d-flex h-100 flex-column">
    <div class="flex-grow-1"></div>
    <div class="row justify-content-center">
        <div class="col-3">
            <div class="card">ITEM A</div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-3">
            <div class="card">ITEM B</div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-3">
            <div class="card">ITEM C</div>
        </div>
    </div>
    <div class="flex-grow-1"></div>
</div>

We have two buffer flex rows, with flex-grow-1. Each of these rows will expand (with the same weight) to fill the top and bottom portions equally. Each of the content rows in the middle will have the height of their content.

The end result is the ITEM cards centered both vertically and horizontally on the screen. Because they are within individual rows, you can adjust margins/padding as necessary (by default they cards end up next to each other vertically.

Example screenshot of the above code in bootstrap

You could potentially do this one with one row + column and an internal flexbox, but that gives you less control over how the individual cards appear in relation to each other.

EDIT: d-flex makes the container a flex container around it's child rows, and flex-column makes the children render and stretch vertically rather than horizontally.

回答2:

Simplest solution is to make the rows 50% height instead...

<body style="height: 100vh;">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="col-6">
                <div class="card">
                    hello
                </div>
            </div>
        </div>
        <div class="row h-100 justify-content-center align-items-center">
            <div class="col-4">
                <div class="card">
                    world
                </div>
            </div>
        </div>
    </div>
</body>

Demo: https://www.codeply.com/go/7POJtgNaQI

Or, the flexbox method would be to use Bootstrap flex-grow-1 class. Also you don't need the height on the body. Just use min-vh-100 on the container...

<div class="container d-flex flex-column min-vh-100">
    <div class="row flex-grow-1 justify-content-center align-items-center">
        <div class="col-6">
            <div class="card">
                hello
            </div>
        </div>
    </div>
    <div class="row flex-grow-1 justify-content-center align-items-center">
        <div class="col-4">
            <div class="card">
                world
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/n1eL2Jakuo

回答3:

Always give the height through the inner element height, If I will give the height on container class element, it won't work, so let the container depend on the inner element's height, So try like this.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container mt-3">
	<div class="col-12" style="min-height: 180px;">
		<div
			class="row bg-success position-absolute w-100 h-100 d-flex flex-row justify-content-center align-items-center">

			<div class="col-6 pr-2">
				<div class="card text-center">
					hello
				</div>
			</div>

			<div class="col-6 pl-2">
				<div class="card text-center">
					world
				</div>
			</div>

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

Hope you will understand this tiny mess, and so it would help you.

来源：https://stackoverflow.com/questions/54718809/horizontally-and-vertically-center-bootstrap-4-columns-in-consecutive-rows

标签

html

flexbox

bootstrap-4

vertical-alignment

centering