I wrote a code like this:
.box {
background-color: red;
}
.container {
height: 50vh;
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div style="height: 250px; background-color: blue;">
<div >
<div >
<div >1</div>
</div>
<div >
<div >1</div>
</div>
</div>
</div>
</body>
</html>
My goal is to center it from top to bottom. So like this:
The code I wrote is not working for some reason. I read the documentation but couldn't find a solution. I wonder why the code boxes I wrote are not centered?
I tried the sample codes in the documents.
CodePudding user response:
Set your flex div to a height of 100% and set justify-content to center
.box {
background-color: red;
}
.container {
height: 50vh;
background-color: blue;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div style="height: 250px; background-color: blue;">
<div >
<div >
<div >1</div>
</div>
<div >
<div >1</div>
</div>
</div>
</div>
CodePudding user response:
SioGabx probably has the best answer, but as an alternative, you could always use table tags to accomplish a similar look.
<table border="1" style="background-color: blue;">
<tr>
<td valign="middle" style="height: 500px;">
<div style="background-color: red;">Box</div>
</td>
</tr>
</table>
CodePudding user response:
You could accomplish this by setting your parent div, the blue one, to display: flex, flex-direction: column, and justify-content: center. You can accomplish this all with built in bootstrap utility classes. Your code would look like this.
<div style="height: 250px; background-color: blue;">
<div >
<div >
<div >1</div>
</div>
<div >
<div >1</div>
</div>
</div>
</div>
Note: I've also changed your "justify-content-start" to "justify-content-center"
Here is how this looks, finished: screenshot