Quisiera saber cómo puedo hacer para centrar un botón en el contenedor usando Bootstrap, es decir, en el centro de la pantalla tanto vertical como horizontalmente. Lo intenté de varias maneras pero no puedo. Mi código es el siguiente:
html,
body {
background-image: url("fondo.jpeg");
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
.container-fluid {
background-color: cyan;
border: 2px solid black;
display: flex;
justify-content: center;
}
.col {
background-color: pink;
border: 2px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container-fluid h-100">
<div class="row w-100">
<div class="col">
<button class="btn btn-danger center-block"> A regular button </button>
</div>
</div>
</div>
</body>
</html>