How To Center Vertically And Horizontally A Heading Text Using Flask-bootstrap

How can I bring a heading text in the middle of a page? I'm using flask-bootstrap and I would like to customize it with my own CSS style. Here's my sample code: HTML {% extends 'bo

Solution 1:

If you're trying to place the content (both vertically and horizontally) center of the page you can use position: absolute with 2D Transforms.

*You may want to use a media query for smaller viewports but it isn't necessary to work correctly.

Working Example:

html,
body {
  width: 100%;
  height: 100%;
}
body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.header .text-vertical-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: red;
}
.header .text-vertical-center h1 {
  margin: 0;
  padding: 0;
  font-size: 4.5em;
  font-weight: 700;
}
.header .btn-dark {
  border-radius: 4;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
}
@media (max-width: 800px) {
  .header .text-vertical-center {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
  }
}

<link  type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<header class="header">
  <div class="text-vertical-center">
    <h1>Welcome to my Site</h1>
    <h3>My portfolio</h3>
    <br>
    <a href="#" class="btn btn-dark btn-lg">Next Site</a>
  </div>
</header>

Solution 2:

In order to use display: table-cell; in this way, the parent element must be set to display: table;. After this it should work.

.header {
 display: table;
}

Solution 3:

I think this will help you.

.text-vertical-center{
 height: 100px;
 width: 100px;
 background-color: #036;
 left: 0;
 margin: auto;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
}

<div class="text-vertical-center">
    <h1>Welcome to my Site</h1>
    <h3>My portfolio</h3>
    <br>
    <a href="#" class="btn btn-dark btn-lg">Next Site</a>
</div>