纯CSS垂直居中

最新推荐文章于 2025-04-18 20:43:03 发布

原创最新推荐文章于 2025-04-18 20:43:03 发布 · 368 阅读

0 ·

CC 4.0 BY-SA版权

1.高度不确定垂直居中transform:translateY(-50%);

<main>
  
  <div>
     I'm a block-level element with an unknown height, centered vertically within my parent.
  </div>
  
</main>


main {
    background: white none repeat scroll 0 0;
    height: 300px;
    margin: 20px;
    overflow: auto;
    position: relative;
    resize: vertical;
    width: 300px;
}
main div {
    background: black none repeat scroll 0 0;
    color: white;
    left: 20px;
    overflow: auto;
    padding: 20px;
    position: absolute;
    resize: vertical;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

2.使用

flexbox 弹性盒模式，实现垂直居中，适合任意布局

<main>
  
  <div>
     I'm a block-level element with an unknown height, centered vertically within my parent.
  </div>
  
</main>

main {   
  display: flex;
  flex-direction: column;
  justify-content: center;
}

3.使用flexbox 弹性盒模式，实现垂直、水平居中，适合任意布局

      <main>
  
  <div>
     I'm a block-level-ish element of an unknown width and height, centered vertically within my parent.
  </div>
  
</main>
    

main