Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
Choose from .align-baseline , .align-top , .align-middle , .align-bottom , .align-text-bottom , and .align-text-top as needed.
I am trying to center my Container in the middle of the page using Bootstrap 4. I have been unsuccessful thus far. Any help would be appreciated.
I have built it at Codepen.io so you guys can play with it and let me know what works as I am about out of ideas.
Содержание
- 13 Answers 13
- How to vertically align anything
- More Vertical Center Examples
13 Answers 13
Important! Vertical center is relative to the height of the parent
If the parent of the element you’re trying to center has no defined height, none of the vertical centering solutions will work!
Now, onto vertical centering in Bootstrap 4.
You can use the new flexbox & size utilities to make the container full-height and display: flex . These options don’t require extra CSS (except that the height of the container (ie:html,body) must be 100%).
Option 1 align-self-center on flexbox child
Option 2 align-items-center on flexbox parent ( .row is display:flex; flex-direction:row )
Option 3 justify-content-center on flexbox parent ( .card is display:flex;flex-direction:column )
More on Bootstrap 4 Vertical Centering
Now that Bootstrap 4 offers flexbox and other utilities, there are many approaches to vertical alignment. http://www.codeply.com/go/WG15ZWC4lf
1 — Vertical Center Using Auto Margins:
Another way to vertically center is to use my-auto . This will center the element within it’s container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.
my-auto represents margins on the vertical y-axis and is equivalent to:
2 — Vertical Center with Flexbox:
Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it.
or, use align-items-center on the entire .row to vertically center align all col-* in the row.
3 — Vertical Center Using Display Utils:
Bootstrap 4 has display utils that can be used for display:table , display:table-cell , display:inline , etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.
Important! Did I mention height?
Remember vertical centering is relative to the height of the parent element. If you want to center on the entire page, in most cases, this should be your CSS.
Or use min-height: 100vh ( min-vh-100 in Bootstrap 4.1+) on the parent/container. If you want to center a child element inside the parent. The parent must have a defined height.
you can vertically align your container by making the parent container flex and adding align-items:center :
Following bootstrap 4 classes helped me solve this
Because none of the above worked for me, I am adding another answer.
Goal: To vertically and horizontally align a div on a page using bootstrap 4 flexbox classes.
Step 1: Set your outermost div to a height of 100vh . This sets the height to 100% of the Veiwport Height. If you don’t do this, nothing else will work. Setting it to a height of 100% is only relative to the parent, so if the parent is not the full height of the viewport, nothing will work. In the example below, I set the Body to 100vh.
Step 2: Set the container div to be the flexbox container with the d-flex class.
Step 3: Center div horizontally with the justify-content-center class.
Step 4: Center div vertically with the align-items-center
Step 5: Run page, view your vertically and horizontally centered div.
Note that there is no special class that needs to be set on the centered div itself (the child div)
How to vertically align anything
Getting elements to center align vertically has always been a challenge in CSS, let alone Bootstrap. In this story I’ll examine all the new approaches in Bootstrap 4, which are simpler that vertical center in Bootstrap 3.
Now that Bootstrap 4 is flexbox by default, vertical alignment gets a little easier. In general, there are 3 different approaches to vertical alignment…
At first, the “Vertical Align” utilities would seem an obvious choice, but these only work with inline and table display elements. Consider the following vertical alignment options and scenarios.
In general, there are 2 types of vertical alignment scenarios you’ll encounter…
- vertical centering within a parent container.
- or, vertical centering relative to adjacent elements.
1 — Vertical Center Using Auto Margins
One way to vertically center is to use my-auto . This will center the element within it’s flexbox container (The Bootstrap 4 .row is display:flex ). For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.
my-auto represents margins on the vertical y-axis, and is equivalent to:
2 — Vertical Center with Flexbox
Since the Bootstrap 4 .row >display:flex you can simply use the new align-self-center flexbox utility on any column to vertically center it:
or, use align-items-center on the entire .row to vertically center align all col-* (columns) in the row…
3 — Vertical Center Using Display Utils
Bootstrap 4 has now has display utils that are used a wrapper for the CSS display propery such as display:block , display:inline , display:table-cell, display:none , etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.
More Vertical Center Examples
To following along with the latest Bootstrap 4 developments, examples and themes also check out my Bootstrap4.guide
Источник: