<div
class="container text-center bg-light bg-opacity-75 rounded-5 border-3 border border-warning h-50 p-3 position-fixed top-50 start-50 translate-middle"
>
<div class="row fixed-top">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<div class="row align-items-center">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<div class="row fixed-bottom">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
</div>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
<div
class="container text-center bg-light bg-opacity-75 rounded-5 border-3 border border-warning h-50 p-3 position-fixed top-50 start-50 translate-middle"
>
<div class="row fixed-top">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<div class="row align-items-center">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<div class="row fixed-bottom">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
</div>
Uso la documentación https://getbootstrap.com/docs/5.0/layout/columns/#alignment por ejemplo y tampoco sirve, quiero hacer un div con bordes justo en el medio, y en este 3 filas de 3 columnas, en la parte superior medio e inferior