在页面上对引导网格进行居中
在页面上对引导网格进行居中
提问于 2022-04-29 12:24:59
我一直试图得到一个引导网格垂直中心在我的页面，但似乎无法使它的中心。水平中心工作很好。
HTML：
<div class="container-fluid">
<div class="board vh-100">
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">A</div>
<div class="col-4 tic-box">B</div>
<div class="col-4 tic-box">C</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">D</div>
<div class="col-4 tic-box">E</div>
<div class="col-4 tic-box">F</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">G</div>
<div class="col-4 tic-box">H</div>
<div class="col-4 tic-box">I</div>
</div>
</div>
</div>CSS：
.tic-box {
border: solid black 1px;
font-size: 3vw;
text-align: center;
width: 90px;
height: 90px;
}谢谢你的帮助！
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-04-29 12:42:06
因为您的board元素具有特定的高度v-100，所以您可以将以下css属性添加到您的board元素中，以使其内容居中。
.board{
display:flex;
flex-direction: column;
justify-content:center;}Stack Overflow用户
发布于 2022-04-29 12:44:38
嗨，我想这是最干净的方法去做你想做的事！
.tic-box {
border: solid black 1px;
font-size: 3vw;
text-align: center;
width: 90px;
height: 90px;
}<!doctype html>
<html lang="en">
<head>
<title>Center</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.0.2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid d-flex align-items-center min-vh-100">
<div class="board mx-auto">
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">A</div>
<div class="col-4 tic-box">B</div>
<div class="col-4 tic-box">C</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">D</div>
<div class="col-4 tic-box">E</div>
<div class="col-4 tic-box">F</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">G</div>
<div class="col-4 tic-box">H</div>
<div class="col-4 tic-box">I</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
Stack Overflow用户
发布于 2022-04-29 12:46:45
我拿到了-
body{
justify-content: center;
align-items: center;
display: flex;
}
.tic-box {
border: solid black 1px;
font-size: 3vw;
text-align: center;
width: 90px;
height: 90px;
}<div class="container-fluid">
<div class="board vh-100">
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">A</div>
<div class="col-4 tic-box">B</div>
<div class="col-4 tic-box">C</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">D</div>
<div class="col-4 tic-box">E</div>
<div class="col-4 tic-box">F</div>
</div>
<div class="row t-row justify-content-center">
<div class="col-4 tic-box">G</div>
<div class="col-4 tic-box">H</div>
<div class="col-4 tic-box">I</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72057942
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号