CSS中水平居中、垂直居中、水平垂直居中都有哪些方法？

前端小码哥
86 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情

一、文本水平居中

1、使用 text-align: center

父元素设置属性 text-align: center。

<body>
  <div class="parent">
    <div class="child">文本水平居中</div>
  </div>
</body>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .parent {
    text-align: center;
    background-color: #fff000;
  }
</style>

image.png

2、使用 margin: 0 auto

子级元素使用属性 margin: 0 auto ，同时设置固定宽度。

<body>
  <div class="parent">
    <div class="child">文本水平居中</div>
  </div>
</body>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .child {
    width: 100px;
    margin: 0 auto;
    border: 1px solid #ccc;
  }
</style>

image.png

3、使用 flex 布局

父元素使用 flex 布局，并设置水平居中属性 justify-content: center;。

<body>
  <div class="parent">
    <div class="child">文本水平居中</div>
  </div>
</body>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .parent {
    display: flex;
    justify-content: center;
    background-color: #fff000;
  }
</style>

image.png

4、使用 table 布局 + margin: 0 auto

子级元素不固定宽度，可以使用属性 display: table; margin: 0 auto。

<body>
  <div class="parent">
    <div class="child">文本水平居中</div>
  </div>
</body>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .parent {
    background-color: #fff000;
  }
  .child {
    display: table;
    margin: 0 auto;
  }
</style>

image.png

5、使用 绝对定位 + 负 margin

子级元素使用绝对定位，设置属性 left: 50%;，并设置负的 margin-left 的值等于 宽度的负一半。

<body>
  <div class="parent">
    <div class="child">文本水平居中</div>
  </div>
</body>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .child {
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    border: 1px solid #ccc;
  }
</style>

image.png

6、使用 绝对定位 + margin: auto

子级元素使用绝对定位，设置属性 left: 0; right: 0; margin: 0 auto，注意：子级元素的宽度需固定

<body>
  <div class="parent">
    <div class="child">文本水平居中</div>
  </div>
</body>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .child {
    width: 100px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    border: 1px solid #ccc;
  }
</style>

image.png

7、使用 绝对定位 + transform

子级元素使用绝对定位，设置属性 left: 50%;，并设置 transform 属性中 X轴的偏移百分比。

<body>
  <div class="parent">
    <div class="child">文本水平居中</div>
  </div>
</body>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .child {
    width: 100px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    border: 1px solid #ccc;
  }
</style>

image.png

二、文本垂直居中

1、使用 line-height

父元素设置 line-height 与 height 相同。

<body>
  <div class="parent">
    <div class="child">文本垂直居中</div>
  </div>
</body>
<style>
  .parent {
    width: 200px;
    height: 100px;
    line-height: 100px;
    background-color: #ccc;
  }
</style>

image.png

2、使用 flex 布局

父元素设置 display: flex; align-items: center。

<body>
  <div class="parent">
    <div class="child">文本垂直居中</div>
  </div>
</body>
<style>
  .parent {
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    background-color: #ccc;
  }
</style>

image.png

3、使用 table 布局

父级元素设置属性 display: table，子级元素设置 display: table-cell; vertical-align: middle。

<body>
  <div class="parent">
    <div class="child">文本垂直居中</div>
  </div>
</body>
<style>
  .parent {
    width: 200px;
    height: 100px;
    display: table;
    background-color: #ccc;
  }
  .child {
    display: table-cell;
    vertical-align: middle;
  }
</style>

image.png

三、文本水平垂直居中

1、使用 text-align 和 line-height

父级元素设置属性 line-height 的值和属性 height 的值相等，并设置属性 text-align: center。

<body>
  <div class="parent">
    <div class="child">文本水平垂直居中</div>
  </div>
</body>
<style>
  .parent {
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 1px solid #ccc;
  }
</style>

image.png

四、元素水平垂直居中

1、使用 flex 布局

使用 flex 布局，父级元素设置属性 display: flex，align-items: center，justify-content: center，注意：父级元素需设置高度。

<body>
  <div class="parent">
    <div class="child">元素水平垂直居中</div>
  </div>
</body>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .parent {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background-color: #fff000;
  }
  .child {
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }
</style>
2、使用 flex 布局 + margin: auto

使用 flex 布局，父级元素设置属性 display: flex，子级元素设置 margin: auto。

<body>
  <div class="parent">
    <div class="child">元素水平垂直居中</div>
  </div>
</body>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .parent {
    width: 100vw;
    height: 100vh;
    background-color: #fff000;
    display: flex;
  }
  .child {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    margin: auto;
  }
</style>
3、使用 绝对定位 + margin: auto

子级元素使用绝对定位，并设置属性 top: 0，left: 0，right: 0，bottom: 0，margin: auto。

<body>
  <div class="parent">
    <div class="child">元素水平垂直居中</div>
  </div>
</body>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .parent {
    width: 100vw;
    height: 100vh;
    background-color: #fff000;
  }
  
  .child {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
</style>
4、使用 绝对定位 + margin负值属性

子级元素使用绝对定位，并设置属性 top: 50%，left: 50%，margin-top 和 margin-left 属性的值等于 元素宽高的负一半。

<body>
  <div class="parent">
    <div class="child">元素水平垂直居中</div>
  </div>
</body>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .parent {
    width: 100vw;
    height: 100vh;
    background-color: #fff000;
  }
  
  .child {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    /* margin: -100px 0 0 -100px; */
  }
</style>
5、使用 绝对定位 + transform 属性

子元素设置 position：absolute; top: 50%; left: 50%，并设置 transform: translate(-50%, -50%)

<body>
  <div class="parent">
    <div class="child">元素水平垂直居中</div>
  </div>
</body>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .parent {
    width: 100vw;
    height: 100vh;
    background-color: #fff000;
  }
  
  .child {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
6、使用 绝对定位 + calc 函数

子元素设置position: absolute，top 和 left 的值用 calc 函数来计算。

<body>
  <div class="parent">
    <div class="child">元素水平垂直居中</div>
  </div>
</body>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .parent {
    width: 100vw;
    height: 100vh;
    background-color: #fff000;
  }
  
  .child {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
  }
</style>
7、使用 table-cell

父级元素使用属性 display: table-cell; vertical-align: middle; text-align: center;，子级元素设置属性 display: inline-block。

<body>
  <div class="parent">
    <div class="child">元素水平垂直居中</div>
  </div>
</body>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100vw;
    height: 100vh;
    background-color: #fff000;
  }
  .child {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    display: inline-block;
  }
</style>
8、使用 伪元素 + display: inline-block

父级元素设置前后伪元素，并设置属性 display: inline-block; height: 100%; vertical-align: middle;，子级元素设置属性 display: inline-block; vertical-align: middle;。

<body>
  <div class="parent">
    <div class="child">元素水平垂直居中</div>
  </div>
</body>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .parent {
    text-align: center;
    width: 100vw;
    height: 100vh;
    background-color: #fff000;
  }
  .parent:before, .parent:after {
    content: "";
    display: inline-block;
    height: 100%;            
    vertical-align: middle;  
  }
  .child {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    display: inline-block;
    vertical-align: middle;
  }
</style>
9、使用 grid 布局

父级元素设置 display: grid，子级元素设置 align-self: center; justify-self: center。

<body>
  <div class="parent">
    <div class="child">元素水平垂直居中</div>
  </div>
</body>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .parent {
    display: grid;
    width: 100vw;
    height: 100vh;
    background-color: #fff000;
  }
  .child {
    align-self: center;
    justify-self: center;
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }
</style>

image.png

avatar
文章
阅读
粉丝