Centering Content on a Page

Wappler General How To
#1

I have a container that contains a row with 2 columns.

I would like to VERTICALLY center the container in the middle of the page. Please advise how you would solve this. I do not want to use the TOP CSS command style. I tried multiple ways with no success.

Thank you in advance.

#2

Make sure that the HTML and Body elements stretch the full page, give the container a height and display a border for the visual effect. This is only for the example.

html, body {
    height: 100%;
} 
.container {
    height: 500px;
}
.h-100 {
    border: 1px dotted #cc2222;
}

Then give the row a height of 100%, the main column a top and bottom margin of auto and all should be well.

<div class="container mt-5">
  <div class="row h-100">
	<div class="col-sm-12 mt-auto mb-auto">
		<div class="row">
			<div class="col text-center">
				I am Left
			</div>
			<div class="col text-center">
				I am Right
			</div>
		</div>
	</div>
</div>

image
image1249Ă—824 42.5 KB

1 Like
#3

Hi Bruce,
There’s an easier solution without setting any height to the container and using only Bootstrap 4 classes.

Add class="h-100" to the <html> tag

Add class="h-100 d-flex align-items-center" to the <body> tag

5 Likes
#4

Is there a way to do this visually? I am struggling too!

#5

What exactly are you trying to achieve? Please describe your question a little more detailed.

#6

Sorry - see the question at the beginning of this thread - something very simple as vertically centering an element (say a container) on the screen.

#7

This depends on your layout and page structure - i.e where is this element located, what element it is, etc.

#8

I see. Thanks - I will muddle on for now…
You might want to consider making this simpler for any element and visual. Designers are visual people :slight_smile:

#9

It’s technically impossible to make this available for “any” element. That’s how HTML and CSS work. A screenshot or two of your app structure can help us answering your question.