如何设置第一行垂直对齐中心

Question

I use align-items-center class in row section but it doesn't work:

 <div class="container"> <div class="row align-items-center"> <div class="col-12 bg-warning"> hello </div> </div> </div> 

I want that line be vertical centered on page as I show in the picture:

Answer 1

Your code is working fine but you have to set a height . At the moment the .container and .row took the height of the content. So you have to set a height to the .row and your .col should be vertical centered:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row align-items-center" style="height:500px;"> <div class="col-12 bg-warning"> hello </div> </div> </div> 

To set vertical center on the visible area of your site, you can use height:100vh; instead of the fixed size.

Answer 2

You need to make the page occupy 100% high.

html, body, .container, .row {
  height: 100%;
}

Answer 3

Try this: https://jsfiddle.net/q1ypnzg8/2/

<div class="container divouter">
    <div class="row align-items-center divmiddle">
        <div class="col-12 bg-warning divinner">
            hello
        </div>
    </div>
</div>

CSS

.divouter {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.divmiddle {
    display: table-cell;
    vertical-align: middle;
}

.divinner {
    margin-left: auto;
    margin-right: auto; 
    text-align: center;
}

Answer 4

CSS has limitations when it comes to putting a text there at the center. For browser compatibility, I'd advice you to use inline alignment property.

<div align="center">Content goes here.</div>

Other properties you can use in case of CSS include:

#divID{ margin:auto text-align: center;

}

Though, I'd prefer the margin auto property since the text align may fail in certain browsers for certain tags.

Answer 5

You can add this css for .row.align-items-center

 .row.align-items-center { position: absolute; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); top: 50%; left: 50%; } 

Hope this will help.