个人中心
gpt4 book ai didi

html - 使用 flexbox 水平和垂直居中 div

转载 作者：技术小花猫 更新时间：2023-10-29 11:51:52 25 4
gpt4 key购买 nike

我正在尝试使用 flexbox 将一些 div 垂直和水平居中，但它没有按预期工作。
这是一张图片，说明了我所拥有的和我所期望的。

enter image description here

代码如下:

<html lang="en">

<body>

<style type="text/css">

    body{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>

    <div>111111</div>
    <div>222222</div>
    <div>333333</div>

</body>

</html>

编辑

当然，我知道最好将 div 放在一个容器中，这是我首先尝试的方法，但在那种情况下，我最终会得到这样的结果:

enter image description here

如您所见，div 按预期在容器中居中，但容器本身并非如此。

最佳答案

你的代码很好，你应该只添加一个 min-height: 100vh 到 body 这样 div 就可以在视口(viewport)高度居中(body 不会t 总是覆盖视口(viewport)高度，它只需要最小的空间来包含它的 child )

示例:http://codepen.io/anon/pen/xGQpKO

关于html - 使用 flexbox 水平和垂直居中 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31697269/

25 4 0
文章推荐： css - 根据屏幕宽度更改实际文本(容易吗？)？
文章推荐： html - Bootstrap 全宽搜索框
文章推荐： css - 如何更改语义 UI 图标的颜色？
文章推荐： css - 如何在 CSS 中将每个单词的首字母大写？
技术小花猫
个人简介

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

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