I have a simple set of code based on https://www.codeply.com/go/akn5BYxQwn in which I am trying to get text to center. I have found alternative ways of getting the centering using flexbot, but understand that it can cause issues with Internet Explorer. See the code below. Uncommenting the lines in the css code will make it work, but then the my-auto isn't needed and can be removed.
Is there a way to make my-auto work without flexbot?
Thanks in advance for any help...
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!-- Use this for mobile devices not to mess with scale -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS CDN-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.row-height-150 {
height: 150px;
background-color: #00cc00;
/* The lines below will make the centering work, but then my-auto is redundant. */
/* display: flex; */
/* align-items: center; */
/* justify-content: center; */
}
html, body {
height: 100%;
}
</style>
<title>Problem</title>
</head>
<body>
<div class="container">
<div class="row h-100">
<div class="col-sm-12 row-height-150 my-auto">
<p>I am Groot.</p>
</div>
</div>
</div>
</div>
<!-- Javascript for bootstrap 4, yes including popper js-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
