垂直居中绝对div,没有定义的高度

这个问题在这里已经有了答案:

  • 我如何垂直居中文本与CSS? 34个答案
  • 如何在另一个<div>中水平居中<div>? 82个答案
  • 如何垂直居中所有浏览器的div? 41个答案

  • 您可以将.child放在top: 50%; 并通过transform: translateY(-50%); ,这将以你的元素为中心。 这会将元素从父元素的顶部放置50%,并将其移至子元素高度的50%。

    .parrent{
      position: relative;
    }
    
    .child {
      background: red;
      width: 50px;
      height: 50px;
    
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    

    在这个小提琴上看到工作解决方案


    你可以使用这个片段:

    https://jsfiddle.net/ocbzdkpd/1/

    基本上你需要:

      top: 50%;
      transform:translateY(-50%);
    

    因为箱子的大小没有关系。


    Flexbox可以帮助你。

    .parent{
      display:flex;
      align-items:center;     // vertical alignment
    }
    
    .child {
      background: red;
      width: 50px;
      height: 50px;   
      position: absolute;
    }
    <div class="parent">
      <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>   
      <div class="child"></div>
    </div>
    链接地址: http://www.djcxy.com/p/41513.html

    上一篇: Center absolute div vertically with no defined height

    下一篇: How to center a DIV popup?