【面试题解】宽高固定的12种和宽高不固定的29种CSS居中方案。

2022-12-10 11:43:00 浏览数 (1)

本文整理了网页布局中水平垂直居中的若干种方法，小伙伴如有其他方案，请在评论区指出，我会加到文章中并注明你的昵称。

先上一张思维导图，让大家一目了然，然后再逐条讲解。

为避免重复代码过多，本文所有内容都以下面这个代码结构为基础，后续只会贴出核心代码。

代码语言：javascript复制
<style>
  .container {
    width: 600px;
    height: 600px;
    background: yellow;
  }
  .content {
    width: 200px;
    height: 200px;
    background: green;
  }
</style>
<body>
  <div class="container">
    <div class="content"></div>
  </div>
</body>

宽高固定

水平居中

1.相对定位

相对定位会占据原本的文档流，left 父元素宽度的 1/2 - 自身宽度的 1/2。

代码语言：javascript复制
  .content {
    position: relative;
    left: 200px;
  }

2.绝对定位

子绝父相，left 父元素宽度的 1/2 - 自身宽度的 1/2。

代码语言：javascript复制
 .container {
    position: relative;
  }
  .content {
    position: absolute;
    left: 200px;
  }

3.transform

利用 CSS3 的 transform ，translateX 父元素宽度的 1/2 - 自身宽度的 1/2。

代码语言：javascript复制
  .content {
    transform: translateX(200px);
  }

4.margin

margin-left 父元素宽度的 1/2 - 自身宽度的 1/2 。

代码语言：javascript复制
  .content {
    margin-left: 200px;
  }

垂直居中

1.相对定位

相对定位会占据原本的文档流，top 父元素高度的 1/2 - 自身高度的 1/2。

代码语言：javascript复制
  .content {
    position: relative;
    top: 200px;
  }

2.绝对定位

子绝父相，top 父元素高度的 1/2 - 自身高度的 1/2。

代码语言：javascript复制
 .container {
    position: relative;
  }
  .content {
    position: absolute;
    top: 200px;
  }

3.transform

利用 CSS3 的 transform ，translateY 父元素高度的 1/2 - 自身高度的 1/2。

代码语言：javascript复制
  .content {
    transform: translateY(200px);
  }

4.margin

margin-top 父元素高度的 1/2 - 自身高度的 1/2 ，要注意解决边距重叠问题。

代码语言：javascript复制
  .container {
    overflow: hidden;
  }
  .content {
    margin-top: 200px;
  }

水平垂直居中

1.相对定位

相对定位会占据原本的文档流，left 父元素宽度的 1/2 - 自身宽度的 1/2，top 父元素高度的 1/2 - 自身高度的 1/2。

代码语言：javascript复制
  .content {
    position: relative;
    left: 200px;
    top：200px；
  }

2.绝对定位

子绝父相，left 父元素宽度的 1/2 - 自身宽度的 1/2，top 父元素高度的 1/2 - 自身高度的 1/2。

代码语言：javascript复制
 .container {
    position: relative;
  }
  .content {
    position: absolute;
    left: 200px;
    top：200px；
  }

3.transform

利用 CSS3 的 transform ，translateX 父元素宽度的 1/2 - 自身宽度的 1/2，translateY 父元素高度的 1/2 - 自身高度的 1/2。

代码语言：javascript复制
  .content {
    transform: translateX(200px) translateY(200px);
  }

4.margin

margin-left 父元素宽度的 1/2 - 自身宽度的 1/2，margin-top 父元素高度的 1/2 - 自身高度的 1/2 ，要注意解决边距重叠问题 。

代码语言：javascript复制
  .container {
    overflow: hidden;
  }
  .content {
    margin-left: 200px;
    margin-top: 200px;
  }

宽高不固定

水平居中

1.margin 0 auto

代码语言：javascript复制
.content {
    margin: 0 auto;
}

2.flex布局

代码语言：javascript复制
  .container {
    display: flex;
    justify-content: center;
  }

3.gird布局

代码语言：javascript复制
  .container {
    display: grid;
    justify-content: center;
  }

4.另外一种gird布局

代码语言：javascript复制
  .container {
    display: grid
  }
  .content {
    justify-self: center;
  }

5.绝对定位 margin

代码语言：javascript复制
  .container {
    position: relative;
  }
  .content {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

6.绝对定位 transform

代码语言：javascript复制
  .container {
    position: relative;
  }
  .content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

7.display: inline-block

代码语言：javascript复制
  .container {
    text-align: center;
  }
  .content {
    display: inline-block;
  }

8.display: box

代码语言：javascript复制
  .container {
    display: -webkit-box;
    -webkit-box-pack: center;
  }

9.table布局

代码语言：javascript复制
  .container {
    display: table-cell;
    text-align: center;
  }
  .content {
    display: inline-block;
  }

垂直居中

1.flex布局

代码语言：javascript复制
  .container {
    display: flex;
    align-items: center;
  }

2.gird布局

代码语言：javascript复制
  .container {
    display: grid;
    align-items: center;
  }

3.另外一种gird布局

代码语言：javascript复制
  .container {
    display: grid
  }
  .content {
    align-self: center;
  }

4.绝对定位 margin

代码语言：javascript复制
  .container {
    position: relative;
  }
  .content {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
  }

5.绝对定位 transform

代码语言：javascript复制
  .container {
    position: relative;
  }
  .content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

6.writing-mode text-align

代码语言：javascript复制
  .container {
    writing-mode: vertical-lr;
    text-align: center;
  }
  .content {
    display: inline-block;
  }

7.writing-mode margin

代码语言：javascript复制
  .container {
    writing-mode: vertical-lr;
  }
  .content {
    margin: auto 0;
  }

8.vertical-align line-height

代码语言：javascript复制
  .container {
    line-height: 600px;
  }
  .content {
    display: inline-block;
    vertical-align: middle;
  }

9.display: box

代码语言：javascript复制
  .container {
    display: -webkit-box;
    -webkit-box-align: center
  }

10.table布局

代码语言：javascript复制
  .container {
    display: table-cell;
    vertical-align: middle;
  }
  .content {
    display: inline-block;
  }

水平垂直居中

1.flex布局

代码语言：javascript复制
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

2.gird布局

代码语言：javascript复制
  .container {
    display: grid;
    align-items: center;
    justify-content: center;
  }

3.另一种grid布局

代码语言：javascript复制
  .container {
    display: grid
  }
  .content {
    align-self: center;
    justify-self: center;
  }

4.绝对定位 transform

代码语言：javascript复制
  .container {
    position: relative;
  }
  .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }

5.绝对定位 margin

代码语言：javascript复制
  .container {
    position: relative;
  }
  .content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

6.flex margin

代码语言：javascript复制
  .container {
    display: flex;
  }
  .content {
    margin: auto;
  }

7.转换成行内元素

注：table 标签也可以实现，但是依靠的也是 text-align: center 属性，就不单独列出来了。

代码语言：javascript复制
  .container {
    line-height: 600px;
    text-align: center;
    display: inline-block;
  }
  .content {
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
  }

8.伪元素

代码语言：javascript复制
  .container {
    text-align: center;
  }
  .container::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  .content {
    display: inline-block;
    vertical-align: middle;
  }

注：::after 也可以实现，但是思路是一样的，就不单独列出来了。

9.display:box

这是 flex 布局的前身，但是也能用。

代码语言：javascript复制
  .container {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center
  }

10.table布局

代码语言：javascript复制
  .container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .content {
    display: inline-block;
  }

css

0 人点赞