html 无需高度的中心对齐[副本]

cld4siwp 于 2022-12-16 发布在其他

关注(0)|答案(4)|浏览(145)

此问题在此处已有答案：

How can I vertically center a div element for all browsers using CSS?（48个答案）
Flexbox: center horizontally and vertically（14个答案）
Centering in CSS Grid（9个答案）
18小时前关门了。
看了一些教程和文档现在。它声称，
所有你需要做的是下面的水平和垂直对齐一个div。

.grid {
    display: grid;
    place-items: center;
}

但从我所看到的不是真的，它是水平对齐的，而不是垂直的。
要使其垂直对齐，需要添加height。

.grid {
    display: grid;
    place-items: center;
    height: 500px;
}

但这不是动态的，因为它总是保持中心的任何高度。height: 100%不工作。
我是否做错了什么，或者文档/教程不正确？
如果重要的话，在Edge browser上试试这个。

<!DOCTYPE html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <style>

        * {
            padding: 0;
            margin: 0;
        }

        .grid {
            display: grid;
            place-items: center;
        }
    </style>
    <body>
        <article class="grid">
            <div>
                😀
            </div>
        </article>
    </body>
</html>

文档和教程参考：
https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
https://www.youtube.com/shorts/njdJeu95p6s
https://youtu.be/qm0IfG1GyZU?t=128

Html

来源：https://stackoverflow.com/questions/74810923/center-alignment-without-the-need-for-height

4条答案

按热度按时间

sqyvllje1#

问题是您没有将height设置为父元素。
您可以使用height: 100%;，但是还需要将height设置为父元素（例如，在本例中为<body>）。
请参见下面的片段。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  
  body {
    height: 100vh;
  }
  
  .grid {
    display: grid;
    place-items: center;
    height: 100%;
    border: 5px solid red;
  }
</style>

<body>
  <article class="grid">
    <div>
      😀
    </div>
  </article>
</body>

</html>

赞(0）回复(0）举报 2022-12-16

j8yoct9x2#

您可能希望查找在块元素中处理宽度的方式。
例如，在MDN中
注意：块级元素总是从新的一行开始，并占据可用的全部宽度（向左和向右尽可能地延伸）。
这就是为什么你的表情要水平居中。
高度只是表情符号内容的高度。
如果你想让表情符号在视图的中间居中，那么就给它指定视图的高度;如果你想让它在父元素（当前是body元素）中居中，那么就给它指定父元素的高度（height：100%）。
此代码段假定您希望它在视口中居中：

<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  
  .grid {
    display: grid;
    height: 100vh;
    place-items: center;
  }
</style>

<body>
  <article class="grid">
    <div>
      😀
    </div>
  </article>
</body>

</html>

赞(0）回复(0）举报 2022-12-16

7gyucuyw3#

通常如果你为那个元素设置了margin: auto;，它会在父元素中居中，但是它不应该被其他定位属性覆盖，所以我建议你试试这个解决方案，看看它是否有效

赞(0）回复(0）举报 2022-12-16

nwlqm0z14#

不能在截面中垂直放置，因为默认情况下section中没有任何额外高度。
在下面的代码中，你可以看到，如果我们将height应用于.height类，那么section将获得height。
可以使用100vh或100%或以像素为单位的高度

* {
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
}

.grid {
  display: grid;
  background: #21977c69;
  place-items: center;
}

.grid>div {
  background: #fa977c69
}

.height {
  height: 100%;
}

<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <article class="grid">
    <div>
      😀
    </div>
  </article>
  <article class="grid height">
    <div>
      this is a grid with a height
    </div>
  </article>
</body>

</html>

赞(0）回复(0）举报 2022-12-16

我来回答

html 无需高度的中心对齐[副本]

4条答案

相关问题

热门标签

最新问答