如何在不提供屏幕高度的情况下垂直对齐div?

贝尼迪克特(Benedikt W.)

我正在尝试构建水平和垂直对齐的滑块。display: flex;在这段代码中使用:

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
<div id="slider">

  the content

</div>

我希望div位于屏幕的中央,但不给身体一定的高度,这似乎对我不起作用。我必须使用height: 100vh;还是有更好的解决方案?

内纳德·弗拉卡(Nenad Vracar)

您需要设置height: 100%html也。

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
<div id="slider">
  the content
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在我的情况下垂直对齐我的标签

来自分类Dev

如何在不使用表格单元格的情况下垂直对齐以下内容

来自分类Dev

如何在不知道父级高度的情况下垂直居中放置div?

来自分类Dev

如何在不破坏垂直对齐的情况下定位DIV?

来自分类Dev

如何在体内垂直对齐div?

来自分类Dev

在不使用高度100%的情况下垂直居中div的内容

来自分类Dev

CSS Flex Box:如何在不损失flex项目高度的情况下将“ flex项目”垂直对齐到中间?

来自分类Dev

CSS Flex Box:如何在不损失柔韧性项目高度的情况下将“柔韧性项目”垂直对齐到中间?

来自分类Dev

如何在具有百分比高度的div中间垂直对齐文本?

来自分类Dev

如何垂直对齐图像,即动态高度旁边的div

来自分类Dev

如何垂直对齐图像,即动态高度旁边的div

来自分类Dev

如何在其父高度的中心垂直对齐子项

来自分类Dev

如何在另一个固定高度div内垂直对齐动态高度div

来自分类Dev

如何在div内部垂直对齐div?

来自分类Dev

如何垂直对齐<p>和<div>,将它们放置在没有表格单元格属性的情况下

来自分类Dev

如何在没有附加html的情况下垂直居中放置文本

来自分类Dev

如何在不居中导航栏的情况下垂直居中身体元素

来自分类Dev

如何在div中垂直对齐2个类

来自分类Dev

如何在包含图像的div中垂直对齐链接?

来自分类Dev

如何在包含图像的div中垂直对齐链接?

来自分类Dev

如何在CSS的div中垂直对齐元素?

来自分类Dev

如何在div中居中和垂直对齐文本?

来自分类Dev

根据左DIV高度垂直对齐右DIV

来自分类Dev

Div垂直对齐

来自分类Dev

<div>垂直对齐

来自分类Dev

Div垂直对齐

来自分类Dev

在我的情况下,如何将垂直对齐设置为中间?

来自分类Dev

如何垂直对齐此div?

来自分类Dev

在不固定高度的情况下将按钮垂直对齐到中间,以显示移动视图和桌面视图

Related 相关文章

  1. 1

    如何在我的情况下垂直对齐我的标签

  2. 2

    如何在不使用表格单元格的情况下垂直对齐以下内容

  3. 3

    如何在不知道父级高度的情况下垂直居中放置div?

  4. 4

    如何在不破坏垂直对齐的情况下定位DIV?

  5. 5

    如何在体内垂直对齐div?

  6. 6

    在不使用高度100%的情况下垂直居中div的内容

  7. 7

    CSS Flex Box:如何在不损失flex项目高度的情况下将“ flex项目”垂直对齐到中间?

  8. 8

    CSS Flex Box:如何在不损失柔韧性项目高度的情况下将“柔韧性项目”垂直对齐到中间?

  9. 9

    如何在具有百分比高度的div中间垂直对齐文本?

  10. 10

    如何垂直对齐图像,即动态高度旁边的div

  11. 11

    如何垂直对齐图像,即动态高度旁边的div

  12. 12

    如何在其父高度的中心垂直对齐子项

  13. 13

    如何在另一个固定高度div内垂直对齐动态高度div

  14. 14

    如何在div内部垂直对齐div?

  15. 15

    如何垂直对齐<p>和<div>,将它们放置在没有表格单元格属性的情况下

  16. 16

    如何在没有附加html的情况下垂直居中放置文本

  17. 17

    如何在不居中导航栏的情况下垂直居中身体元素

  18. 18

    如何在div中垂直对齐2个类

  19. 19

    如何在包含图像的div中垂直对齐链接?

  20. 20

    如何在包含图像的div中垂直对齐链接?

  21. 21

    如何在CSS的div中垂直对齐元素?

  22. 22

    如何在div中居中和垂直对齐文本?

  23. 23

    根据左DIV高度垂直对齐右DIV

  24. 24

    Div垂直对齐

  25. 25

    <div>垂直对齐

  26. 26

    Div垂直对齐

  27. 27

    在我的情况下,如何将垂直对齐设置为中间?

  28. 28

    如何垂直对齐此div?

  29. 29

    在不固定高度的情况下将按钮垂直对齐到中间,以显示移动视图和桌面视图

热门标签

归档