【CSS 布局】水平垂直方向居中

最新推荐文章于 2024-07-05 10:10:19 发布

岁月可贵

最新推荐文章于 2024-07-05 10:10:19 发布

阅读量936

点赞数 1

分类专栏： css笔记文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44659458/article/details/132182812

版权

css笔记专栏收录该内容

17 篇文章 1 订阅

订阅专栏

【CSS 布局】水平垂直方向居中

单行元素

<div class="container">
    <div class="item"></div>
</div>

方式一：relative 和 absolute

.container {
  position: relative;
  height: 400px;
  border: 1px solid #ccc;
  .item {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    border: 1px solid #ccc;
  }
}

方式二：relative 和 absolute（变种，适合于宽高固定）

.container {
  position: relative;
  height: 400px;
  border: 1px solid #ccc;
  .item {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-bottom: -100px;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
  }
}

方式三：flex 和 margin

.container {
  display: flex;
  height: 400px;
  border: 1px solid #ccc;
  .item {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    margin: auto; /* 关键点 */ 
  }
}

方式四：flex

.container {
  display: flex;
  height: 400px;
  border: 1px solid #ccc;
  justify-content: center;
  align-items: center;
  .item {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
  }
}

方式五：flex

.container {
  display: flex;
  height: 400px;
  border: 1px solid #ccc;
  justify-content: center;
  .item {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    align-self: center;
  }
}

多行元素

<div class="container">
    <img src="./login.png" alt="" />
    <p>欢迎访问我的个人博客 hhmax.xyz</p>
    <button>按钮</button>
</div>

.container {
  height: 400px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}