Center a H1 Tag Inside a Div

Center a H1 tag inside a DIV

You can add line-height:51px to #AlertDiv h1 if you know it's only ever going to be one line. Also add text-align:center to #AlertDiv.

#AlertDiv {
    top:198px;
    left:365px;
    width:62px;
    height:51px;
    color:white;
    position:absolute;
    text-align:center;
    background-color:black;
}

#AlertDiv h1 {
    margin:auto;
    line-height:51px;
    vertical-align:middle;
}

The demo below also uses negative margins to keep the #AlertDiv centered on both axis, even when the window is resized.

Demo: jsfiddle.net/KaXY5

Can't center h1 inside main tags

Try this.

.centered-div {

    width: auto;

    height: auto;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-right: 0;

    margin-left: 0;

    transform: translate(-50%, -50%);

}

<main>

    <div class="container">

        <div class="row centered-div">

            <h1>WELCOME</h1>

        </div>

    </div>

</main>

How do I center h1 in div?

If you want to center using absolute positioning add position: relative to the supporting div and add transform: translate(-50%, -50%) to the h1 tag.

See demo below:

html,

body {

  font-family: ;

  margin: 0 auto;

  text-transform: lowercase;

}

.container {

  margin: 0 auto;

  padding: 0 !important;

}

.nav {

  float: right;

  display: inline;

  margin: 0 auto;

  list-style: none;

}

.nav li {

  list-style: none;

  display: inline;

  padding-top: 0;

  padding-left: 10px;

}

.nav>li>a {

  padding: 0px !important;

  color: black;

}

a:hover {

  background-color: yellow;

}

.header {

  width: 100%;

  display: inline-block;

  padding: 10px 0 0 0;

  margin: 0 auto;

}

.header h1 {

  font-size: 20px;

  margin: 0 auto;

  display: inline-block;

}

.header .nav {

  padding-left: 10px;

}

.supporting {

  position: relative;

}

.supporting h1 {

  border-left: 0px solid black;

  padding: 10px;

  margin: 0 auto;

  display: inline-block;

  top: 50%;

  left: 50%;

  position: absolute;

  transform: translate(-50%, -50%);

}

.supporting .container-fluid {

  background: rgba(225, 225, 225, .8);

  height: 500px;

}

.work .container-fluid {

  height: 500px;

  margin: 0 auto;

  background: white);

  width: 100%;

  padding: 0;

}

div.container-fluid {

  padding: 0;

  width: 100%;

  height: 100%;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

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

<div class="container-fluid">

  <div class="container">

    <div class="header">

      <h1 class="logo">header</h1>

      <ul class="nav nav-pills">

        <li>

          <a href="#">Projects</a>

        </li>

        <li>

          <a href="#">Photography</a>

        </li>

        <li>

          <a href="#">blog</a>

        </li>

      </ul>

    </div>

  </div>

  <div class="supporting">

    <div class="container-fluid">

      <div class="container">

        <h1>hi.</h1>

      </div>

    </div>

  </div>

  <div class="work">

    <div class="container-fluid">

      <div class="container">

        <h1>work</h1>

      </div>

    </div>

  </div>

How to center a h1 tag inside a section tag

Using top: 50% would work in your current situation.

Can't vertical center h1 inside div

There're several (5) methods from me:

1. `grid` (2 ways using grid)

.container {

  background: #a3f;

  height: 100px;

  

  display: grid;

  place-items: center;

  /* or */ /* place-content: center; */

}

.container h4 {

  background: #f02;

}

<div class="container">

  <h4> The header </h4>

</div>

How do I vertically center an H1 in a div?

you can achieve vertical aligning with display:table-cell:

#section1 {
    height: 90%; 
    text-align:center; 
    display:table;
    width:100%;
}

#section1 h1 {display:table-cell; vertical-align:middle}

Example

Update - CSS3

For an alternate way to vertical align, you can use the following css 3 which should be supported in all the latest browsers:

#section1 {
    height: 90%; 
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}

Updated fiddle

Is there a way to center this H1 at the bottom of the div?

For making it be at the bottom of your div, you can make the container that it is in position relative and then your text to be positioned absolute and put it where exactly where you want to

.header{
  position: relative;
}

#header{
  position: absolute;
  bottom: 0px;
  left: 50%;
}