个人中心
gpt4 book ai didi

html - CSS 网格容器未以浏览器视口(viewport)为中心

转载 作者：行者123 更新时间：2023-11-28 15:38:47 25 4
gpt4 key购买 nike

我已经定义了一个具有以下属性的 CSS 网格。但是，我发现在我的 Chrome 桌面浏览器(Macbook Pro 15"显示屏)上，整个网格容器并未居中(垂直和水平)到我的浏览器窗口。

有人可以帮助我如何将整个网格容器居中到浏览器视口(viewport)的中间吗？

html { 

    background: url('images/cbg.png') no-repeat center center fixed; 
    -webkit-background-size: cover; /* Safari */
    -moz-background-size: cover; /* Mozilla Firefox */
    -o-background-size: cover; /* Opera Browser */
    background-size: cover; /* Chrome */


    text-rendering: optimizeLegibility;
    text-align: center;
    }

body {
    box-sizing: border-box;
    min-height: 100%;
    margin: 20px;

    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center; 
}

.wrapper {
  display: grid;

  grid-template-columns: repeat(12, 1fr); 
   /* grid-template-columns: 1fr; */
  grid-gap: 5px;

}

/**** 更新了进入 CSS 网格容器 .wrapper 的网格项 ****/

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 0px;
  font-size: 150%;
}

.box-txt {
  background-color: #fff;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 100%;
  border: 1px solid black;
}

.header1
    {

        grid-column-start: 1;
        grid-column-end: 12;
        grid-row-start: 2;
        grid-row-end: 3; 
        text-align: center;
        height: 80px;
        background: rgb(2,0,36);
        background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(203,203,227,1) 100%, rgba(255,211,0,1) 100%);
    }

.footer{
        grid-column-start: 1;
        grid-column-end: 12;
        grid-row-start: 5;
        grid-row-end: 6;
        text-align: center;
        height: 120px;
        background: rgb(2,0,36);
        background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(203,203,227,1) 100%, rgba(255,211,0,1) 100%);
    }

.imgbox {
        grid-column-start: 6;
        grid-column-end: 12;
        grid-row-start: 3;
        grid-row-end: 4;
        height: 500px;
    }

    .imgbox > img {
        width: 100%;
        height:100%;
        display: block;
        object-fit: cover;
        border-radius: 5px;
        }

    .b {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    .c {
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 3;
        grid-row-end: 4;
    }
    .d {
        grid-column-start: 7;
        grid-column-end: 12; 
        grid-row-start: 4;
        grid-row-end: 5;
    }

最佳答案

我想这就是你需要的:

body {
    box-sizing: border-box;
    margin: 20px;
    width:100%;
    height: 100vh;

    display:flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
  display: grid;

  grid-template-columns: repeat(12, 1fr); 
   /* grid-template-columns: 1fr; */
  grid-gap: 5px;

}
<body>
  <div class="wrapper">
    <div class="col-1">1</div>
    <div class="col-1">2</div>
    <div class="col-1">3</div>
    <div class="col-1">4</div>
    <div class="col-1">5</div>
    <div class="col-1">6</div>
    <div class="col-1">7</div>
    <div class="col-1">8</div>
    <div class="col-1">9</div>
    <div class="col-1">10</div>
    <div class="col-1">11</div>
    <div class="col-1">12</div>
  </div>
</body>

如果您需要更多帮助，请告诉我 :)

关于html - CSS 网格容器未以浏览器视口(viewport)为中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54307242/

25 4 0
文章推荐： javascript - 未加载 wwwroot 文件夹
文章推荐： ios - Swift 3 和带抽屉导航的谷歌地图
文章推荐： javascript - 从文档绑定(bind)事件触发时，ngClass 类更改很慢
文章推荐： arrays - Swift 3 对数组中的大量数据进行排序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com