Bootstrap 4 Center vertically and horizontally

Navigation
3

With the bootstrap classes, I achieve to center both div horizontally, but nevertheless I also wish that they are centered vertically, that they remain in the center of the screen, I attach the code that I have ... 

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

	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-

DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="protexa.css">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-

WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>Grupo Protexa</title>
  </head>
  <body>

	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div>
					<img class="img-fluid rounded mx-auto d-block" src="protexalogo.png" alt="logo" width="25%" 

height="25%">
				</div>

				<div>
					<p style="font-size:24px;" class="text-center"><i class="fas fa-info-circle"> Estamos en 

Mantenimiento....</i></p>
				</div>

			</div>

		</div>
	</div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X

+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV

+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-

smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

Is it possible to do it without having to add, touch css?

    
asked by Rico 29.06.2018 в 21:19
source

1 answer

6

You can use .justify-content-center and .align-items-center , for this to work the row must occupy the entire height of the screen so we will have to declare a class as .minh-100 and assign it to row 

.minh-100 {
  height: 100vh;
}
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row justify-content-center align-items-center minh-100">
    <div class="col-lg-12">
      <div>
        <img class="img-fluid rounded mx-auto d-block" src="" alt="logo" width="25%" height="25%">
      </div>

      <div>
        <p style="font-size:24px;" class="text-center"><i class="fas fa-info-circle"> Estamos en

        Mantenimiento....</i></p>
      </div>

    </div>

  </div>
</div>
    
answered by 29.06.2018 / 21:50
source
Error with Random in JAVA BASH: compare two arrays with IF