Bootstrap 4 aligning tag in absolute center of div

Question

I'm totally new to Bootstrap. I'm having serious problems at aligning an <a> tag in the vertical and horizontal middle of a div.

I've tried to use .mx-auto, margin: 0 auto and other usual methods I know of. I'm running out of otions here.

Can anyone advise me on this.

here is a fiddle for my code

.bg-banner {
  background-image: url("https://images.unsplash.com/photo-1560983073-c29bff7438ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat center center fixed;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 20vh;
}

.banner-logo {

  background-color: red;
  height: 20vh;
}
 .brand-text{
    font-size: 2em;
    color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <header>
      <div class="container-fluid">
         <div class="row">
           <div class="col-md-3 banner-logo text-center">
             <a href="index.html" class="brand-text">webpage</a>
           </div>
           <div class="col-md-9 bg-banner">
           </div>
         </div>
      </div>
    </header>

use flexbox to align-items-center and justify-content-center use flex direction — Haroon Aslam, Jun 20 '19 at 10:59
The accepted answer of the following link works : https://stackoverflow.com/questions/42388989/bootstrap-4-center-vertical-and-horizontal-alignment — Florian Callewaert, Jun 20 '19 at 11:01
Possible duplicate of [Bootstrap 4 Center Vertical and Horizontal Alignment](https://stackoverflow.com/questions/42388989/bootstrap-4-center-vertical-and-horizontal-alignment) — Udhay Titus, Jun 20 '19 at 11:04

score 1 · Answer 1 · answered Jun 20 '19 at 10:59

There are multiple ways for vertical alignment.

You can do by giving position absolute, make the parent div position relative.

Here is the Code:-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .bg-banner {
  background-image: url("https://images.unsplash.com/photo-1560983073-c29bff7438ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat center center fixed;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 20vh;
}

.banner-logo {

  background-color: red;
  height: 20vh;
  position:relative;
}
.banner-logo a
{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
 .brand-text{
    font-size: 2em;
    color: white;
}
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>
        <header>
      <div class="container-fluid">
         <div class="row">
           <div class="col-md-3 banner-logo text-center">
             <a href="index.html" class="brand-text">webpage</a>
           </div>
           <div class="col-md-9 bg-banner">
           </div>
         </div>
      </div>
    </header>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

Accepted solution is better for bootstrap. But this is good for all html and css, so +1 — Wimanicesir, Jun 20 '19 at 11:22
yup, this one is very good, but I accepted the other one just because I'm using bootstrap and that one is more bootstrappy — Dunit, Jun 20 '19 at 11:35

Sai Manoj · Accepted Answer · 2019-06-20T11:12:57.550

As per my understanding,you want to align a tag to vertical and horizontal center inside <div class="banner-logo"></div>. For this you can use bootstrap 4 classes mx-auto and my-auto for the <div> that wraps <a> tag

.banner-logo{
background-color:red;
padding:20px
}
a.brand-text{
text-decoration:none;
color:white;
font-size:20px
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <header>
      <div class="container-fluid">
         <div class="row">
           <div class="col-md-3 banner-logo text-center mx-auto my-auto">
             <a href="index.html" class="brand-text">webpage</a>
           </div>
           <div class="col-md-9 bg-banner">
           </div>
         </div>
      </div>
    </header>

thanks, this is exactly what I was after. `my-auto` seems to be the missing link :) — Dunit, Jun 20 '19 at 11:12

score 0 · Answer 3 · answered Jun 20 '19 at 11:44

You can skip mx-auto and my-auto for that fix, text-center and padding will do the work for you. Check this solution, it's simple. Hope it'd help

.banner-logo{
  background-color: red;
  padding: 10px 0;
}

a.brand-text{
  text-decoration: none;
  color: white;
  font-size: 20px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
 <header>
   <div class="container-fluid">
     <div class="row">
       <div class="col-md-3 banner-logo text-center">
         <a href="index.html" class="brand-text">Webpage</a>
       </div>
       <div class="col-md-9 bg-banner">
       </div>
     </div>
   </div>
 </header>
</body>
</html>

Bootstrap 4 aligning tag in absolute center of div

3 Answers3