How to center align an element vertically?

Question

http://jsfiddle.net/m9121mxt/ This is my case. I want the button to stay in the center of viewmorebutton element. I tried margin:auto; and text-align: center; but they doesn't work. How can I center align the button in the middle vertically? Thanks!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--facebook icon-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
.thirdpage{
    height: 90vh;
    background-color: #101427;
}

.thirdoutter{
    position: relative;
    margin: 0 auto;
    width: 80%;
    height: 100%;
}
.viewmorebutton{
    margin:auto;
    height: 80%;
    text-align: center;
}
</style>

<div class="thirdpage">
    <div class="thirdoutter">
        <div class="viewmorebutton">
            <button type="button" class="btn btn-secondary col-sm-4">VIEW MORE</button>
        </div>
    </div>
</div>

Take a look at the bootstrap utilities for vertical alignment (https://getbootstrap.com/docs/4.0/utilities/vertical-align/) and flexbox (https://getbootstrap.com/docs/4.0/utilities/flex/) — Brian, Jan 30 '18 at 02:10
To use the flex utility, add the following classes to the ".viewmorebutton" div: `div class="viewmorebutton d-flex justify-content-center align-items-center"` — Brian, Jan 30 '18 at 02:12

WebDevBooster · Accepted Answer · 2018-01-30T02:24:08.097

If you just add the classes d-flex align-items-center justify-content-center to the div around your button, then you don't need any custom css because those Bootstrap 4 classes will do the job. After all, since you are loading Bootstrap 4 anyway, you might as well use it.

Here's the working code snippet (click the "run code snippet" button below):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
.thirdpage{
    height: 90vh;
    background-color: #101427;
}

.thirdoutter{
    position: relative;
    margin: 0 auto;
    width: 80%;
    height: 100%;
}
.viewmorebutton{
    margin:auto;
    height: 100%;
    text-align: center;
}
</style>

<div class="thirdpage">
    <div class="thirdoutter">
        <div class="viewmorebutton d-flex align-items-center justify-content-center">
            <button type="button" class="btn btn-secondary col-sm-4">VIEW MORE</button>
        </div>
    </div>
</div>

Just updated my code snippet slightly to make sure the button is perfectly centered within the blue area. — WebDevBooster, Jan 30 '18 at 02:25

score 0 · Answer 2 · answered Jan 30 '18 at 02:11

One way to center items inside a div is set display to table to your .thirdoutter and display table-cell to the .viewmorbutton

.thirdpage{
 height: 90vh;
 background-color: #101427;
}

.thirdoutter{
  display: table;
 position: relative;
    margin: 0 auto;
    width: 80%;
    height: 100%;
}
.viewmorebutton{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
 margin:auto;
 height: 80%;
}
.largercavas{
 height: 100%;
 width: 50%;
 object-fit: cover;
}
.largerimg{
 width: 100%;
 max-height: 100%;
}

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


<div class="thirdpage">
  <div class="thirdoutter">
    <div class="viewmorebutton">
      <button type="button" class="btn btn-secondary col-sm-4">VIEW MORE</button>
    </div> 
  </div>
</div>

score 0 · Answer 3 · answered Jan 30 '18 at 02:12

You have given .thirdoutter a position of relative, which is needed to make it an absolute container for .viewmorebutton

.viewmorebutton {
   position: absolute;
   top: 50%;
   transform: translate(0, -50%) }

position: absolute   will be in relation to its parent container

top: 50%    will vertically centre item

transform: translate (0, -50%)   will move the item itself up by half its own height to fully centre it

How to center align an element vertically?

3 Answers3