-1

I want to center vertically text on page, i found the way to do that and rewrite -on codesnippet it's working, but not for me. Here is my code:

<html lang="pl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <title>Strona w przebudowie</title>
</head>
<body>
    <div class="row h-100">
        <div class="col-sm-12 my-auto">
            <h1 class="display-4">STRONA W PRZEBUDOWIE</h1>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</body>

chwicewski
  • 11
  • 2

2 Answers2

1

It is recommended to use Bootstrap 4 classes (instead of css hacks) for simple tasks of this nature because css hacks have the tendency to require even more css hacks down the road to fix the problems caused by the original css hacks.

A clean solution using Bootstrap 4 classes for vertical centering would be to use the align-items-center class on the row. However, you'll also need to give that row some height if you don't have much content in that row. To achieve that, you add style="height: 100vh" to the row which gives it 100% viewport height.

Finally, if you want to center the text horizontally also, you can use the text-center class on the column.

Here's the complete code snippet (click the "run code snippet" button below and expand to full screen): 

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

<div class="container-fluid">
    <div class="row align-items-center" style="height: 100vh">
        <div class="col-sm-12 text-center">
            <h1 class="display-4">STRONA W PRZEBUDOWIE</h1>
        </div>
    </div>
</div>
WebDevBooster
  • 14,674
  • 9
  • 66
  • 70
0

Try This:

.col-sm-12.my-auto {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


.col-sm-12.my-auto {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <h1 class="display-4">STRONA W PRZEBUDOWIE</h1>
    </div>
</div>
Ehsan
  • 12,655
  • 3
  • 25
  • 44