Alan Notes

CSS之居中布局

·4 分钟阅读·#CSS#布局扫码分享文章

CSS 居中布局分为水平居中布局，垂直居中布局，水平垂直居中布局三种形式。

目录
  1. 水平居中
    1. 1.使用inline-block和text-align
    2. 2.使用table和margin
    3. 3.使用absolute和transform
    4. 示例代码
    5. 4.使用flex和justify-content
    6. 5.使用grid和justify-self
  2. 垂直居中
    1. 1.使用table-cell和vertical-align
    2. 2.使用absolute和transform
    3. 3.使用flex和align-items
    4. 4.使用grid和align-self
    5. 5.文字垂直居中
  3. 水平垂直居中
    1. 1.使用absolute和transform
    2. 2.使用absolute、left/right/top/bottom和margin
    3. 3.使用inline-block、text-align、table-cell和vertical-align
    4. 4.使用flex、justify-content和align-items
    5. 5.使用grid、justify-self和align-self

CSS 居中布局分为水平居中布局，垂直居中布局，水平垂直居中布局三种形式。

水平居中#

1.使用inline-block和text-align#

示例代码

<style>
  .parent {
    text-align: center;
  }
  .child {
    display: inline-block;
  }
</style>
<div class="parent">
  <div class="child">Demo</div>
</div>

分析

将子元素设为行内块元素，再设置行内块元素水平居中。

兼容性：好，文字也会水平居中，可以设置子元素text-align: left还原为左对齐。

2.使用table和margin#

示例代码

<style>
  .child {
    display: table;
    margin: 0 auto;
  }
</style>
<div class="parent">
  <div class="child">Demo</div>
</div>

分析

将子元素设为类似块级表格元素，再设为子元素水平居中。

兼容性：较好，支持 IE8 以上浏览器。

也可以在 flex 和 grid 的子项中使用margin: 0 auto属性使得水平居中，但是兼容性比较差。

3.使用absolute和transform#

示例代码#

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
</style>
<div class="parent">
  <div class="child">Demo</div>
</div>

分析

将子元素向左移动到父元素的中间位置，使其左边和父元素中间位置对齐，然后再反方向（向左）移动子元素本身宽度的 50%，使其水平居中。因为是绝对定位，对其他元素不产生影响。

兼容性：transform是 CSS3 的内容，只支持 IE10 以上浏览器。

4.使用flex和justify-content#

示例代码

<style>
  .parent {
    display: flex;
    justify-content: center;
  }
</style>
<div class="parent">
  <div class="child">Demo</div>
</div>

分析

将父元素设为 flex 弹性布局，设置其中属justify-content以达到水平居中。

兼容性：flex 弹性布局是 CSS3 内容，只支持 IE11 以上浏览器。

5.使用grid和``justify-self`#

示例代码

<style>
  .parent {
    display: grid;
  }
  .child {
    justify-self: center;
  }
</style>
<div class="parent">
  <div class="child">Demo</div>
</div>

分析

将父元素设为 grid 网格布局，设置它的子项属性justify-self以达到水平居中。

兼容性：grid 网格布局只支持现代浏览器。

垂直居中#

注意垂直居中需要设置元素的高度，这里省略代码。

1.使用table-cell和vertical-align#

示例代码

<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>
<div class="parent">
  <div class="child">Demo</div>
</div>

分析

将子元素设为类似块级表格元素，再设为子元素垂直居中。

兼容性：较好，支持 IE8 以上浏览器。

2.使用absolute和transform#

示例代码

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>
<div class="parent">
  <div class="child">Demo</div>
</div>

分析

将子元素向上移动到父元素的中间位置，使其顶部和父元素中间位置对齐，然后再反方向（向上）移动子元素本身宽度的 50%，使其垂直居中。因为是绝对定位，对其他元素不产生影响。

兼容性：transform 是 CSS3 内容，只支持 IE10 以上浏览器。

3.使用flex和align-items#

示例代码

<style>
  .parent {
    display: flex;
    align-items: center;
  }
</style>
<div class="parent">
  <div class="child">Demo</div>
</div>

分析

将父元素设为 flex 弹性布局，设置它的交叉轴的属性align-items以达到垂直居中，效果和justify-content一样。

兼容性：flex 弹性布局是 CSS3 内容，只支持 IE11 以上浏览器。

4.使用grid和align-self#

示例代码

<style>
  .parent {
    display: grid;
  }
  .child {
    align-self: center;
  }
</style>
<div class="parent">
  <div class="child">Demo</div>
</div>

分析

将父元素设为 grid 网格布局，设置它的子项的属性align-self以达到垂直居中。

兼容性：grid 网格布局只支持现代浏览器。

5.文字垂直居中#

示例代码

<style>
  .child {
    height: 100px;
    line-height: 100px;
  }
</style>
<div class="parent">
  <div class="child">Demo</div>
</div>

分析

文字垂直居中只需要设置行高和高度一样即可，适合单行文本。

水平垂直居中#

注意水平垂直居中需要设置元素的宽度和高度，这里省略代码。

1.使用absolute和transform#

示例代码

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>
<div class="parent">
  <div class="child">Demo</div>
</div>

分析

将子元素向左和向上移动到父元素的中间位置，使其顶部和左边与父元素中间位置对齐，然后再反方向（向左向上）移动子元素本身宽度和高度的 50%，使其水平垂直居中。因为是绝对定位，对其他元素不产生影响。

兼容性：transform 是 CSS3 内容，只支持 IE10 以上浏览器。

2.使用absolute、left/right/top/bottom和margin#

示例代码

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
</style>
<div class="parent">
  <div class="child">Demo</div>
</div>

分析

将子元素向左和向上移动到父元素的中间位置，使其顶部和左边与父元素中间位置对齐，然后再反方向（向左向上）移动子元素本身宽度和高度的 50%，使其水平垂直居中。因为是绝对定位，对其他元素不产生影响。

兼容性：transform 是 CSS3 内容，只支持 IE10 以上浏览器。

3.使用inline-block、text-align、table-cell和vertical-align#

示例代码

<style>
  .parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }
</style>
<div class="parent">
  <div class="child">Demo</div>
</div>

分析

先使用text-align和inline-block布局水平居中，再用table-cell和vertical-align布局垂直居中。

兼容性：兼容性较好，支持 IE8 以上浏览器。

4.使用flex、justify-content和align-items#

示例代码

<style>
  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
<div class="parent">
  <div class="child">Demo</div>
</div>

分析

将父元素设为 flex 弹性布局，设置其中属性justify-content以达到水平居中，设置align-items以达到垂直居中。

兼容性：flex 弹性布局是 CSS3 内容，只支持 IE11 以上浏览器。

5.使用grid、justify-self和align-self#

示例代码

<style>
  .parent {
    display: grid;
  }
  .child {
    justify-self: center;
    align-self: center;
  }
</style>
<div class="parent">
  <div class="child">Demo</div>
</div>

分析

将父元素设为 flex 网格布局，设置其中属性justify-self以达到水平居中，设置align-self以达到垂直居中。

兼容性：flex 网格布局是只支持现代浏览器。