css垂直水平居中小技巧

原创于 2016-05-24 17:07:07 发布 · 525 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了使用CSS实现元素水平垂直居中的两种方法：通过绝对定位和transform属性。这两种方法适用于不同场景，帮助开发者灵活地进行网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/

.Center-Container {
  position: relative;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;

.container{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}