sandlz

居中

水平居中

  1. text-align:center

在父元素中设置text-align:center实现行内元素水平居中，将子元素的display设置为inline-block，使子元素变成行内元素

<style>
.parent{text-align: center;}
.child{display: inline-block;}
</style>
水平居中: text-align

不足：子元素的text-align继承了父元素的center，文字也居中显示，所以需要在子元素中设置text-align:left

  1. margin

在本身元素设置margin: 0 auto实现块级元素水平居中

2.1 将子元素的display为table，使子元素成为块级元素，同时table还具有包裹性，宽度由内容撑开

<style>
.child{
    display: table;
    margin: 0 auto;
}
</style>
水平居中: margin

2.2 若子元素定宽，则可以使用绝对定位的盒模型属性，实现居中效果；若不设置宽度时，子元素被拉伸

<style>
.parent{
  position: relative;
}
.child{
 position: absolute;
 left: 0;
 right: 0;
 margin: 0 auto;
 width: 50px;
}
</style>
水平居中: margin
  1. absolute

通过绝对定位的偏移属性实现水平居中

3.1 配合translate()位移函数

translate函数的百分比是相对于自身宽度的，所以left:50%配合translateX(-50%)可实现居中效果

relative 数值型的偏移属性是相对于自身的，但百分比却是相对于包含块的。因为子元素已经被设置为 absolute，所以若使用 relative，则需要增加一层<div>结构，使其宽度与子元素宽度相同.

<style>
.parent{
  position: relative;
}
.child{
  position: absolute;
  left: 50%;
  transform:translateX(-50%);
}
</style>
水平居中: translate

3.2 配合relative

relative数值型的偏移属性是相对于自身的，但百分比却是相对于包含块的。因为子元素已经被设置为absolute，所以若使用relative，则需要增加一层<div>结构，使其宽度与子元素宽度相同

TIP

该方法全兼容，但是增加了 html 结构

<style>
.parent{
  position: relative;
}
.childWrap{
  position: absolute;
  left: 50%;
}
.child{
  position: relative;
  left: -50%;
}
</style>
水平居中: 配合relative

3.3 配合负margin

relative数值型的偏移属性是相对于自身的，但百分比却是相对于包含块的。因为子元素已经被设置为absolute，所以若使用relative，则需要增加一层<div>结构，使其宽度与子元素宽度相同

margin的百分比是相对于包含块的，所以需要增加一层<div>结构。由于宽度width的默认值是auto，当设置负margin时，width也会随着变大。所以此时需要定宽处理

TIP

虽然全兼容，但需要增加页面结构及定宽处理，所以限制了应用场景

<style>
.parent{
  position: relative;
}
.childWrap{
  position: absolute;
  left: 50%;
}
.child{
  width:50px;
  margin-left:-50%;
}
</style>
水平居中: 配合负margin
  1. flex
<style>
.parent6{
  display: flex;
  justify-content: center;
  /* 也可以使用margin */
  /* margin: 0 auto */
}
</style>
水平居中: flex
  1. grid

使用栅格布局grid实现水平居中

<style > .parent7 {
  display: grid;
  justify-items: center;
  /*justify-content:center;*/
}
</style>

/* 或者 child */
.child7 {
  justify-self: center;
  /*margin: 0 auto;*/
}
水平居中: grid

垂直居中

  1. line-height

行高line-height实现单行文本垂直居中

<style>
.test{
    line-height: 100px;
    background-color: lightblue;
}
</style>
测试文字

TIP

在不设置高度的情况下，行高撑开高度

  1. vertical-align

设置vertical-align:middle实现垂直居中

通过为table-cell元素设置vertical-align:middle，可使其子元素均实现垂直居中。这和表格里单元格的垂直居中是类似的

TIP

设置为table-cell的div不能使用浮动或绝对定位，因为浮动或绝对定位会使元素具有块级元素特性，从而丧失了table-cell元素具有的垂直对齐的功能。若需要浮动或绝对定位处理，则需要外面再套一层div

<style>
.parent{
  display: table-cell;
  vertical-align: middle;
}
</style>
我是有点长的有点长的有点长的有点长的测试文字

特殊场景：子元素是图片

通过设置父元素的行高来代替高度，且设置父元素的font-size为 0

vertical-align:middle的解释是元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐。由于字符X在em框中并不是垂直居中的，且各个字体的字符X的高低位置不一致。所以，当字体大小较大时，这种差异就更明显。当font-size为 0 时，相当于把字符X的字体大小设置为0，于是可以实现完全的垂直居中

<style>
.parent{
  line-height: 100px;
  font-size: 0;
}
.child{
  vertical-align: middle;
}
</style>
test
  1. absolute

通过绝对定位实现垂直居中

3.1 配合translate()位移函数, translate函数的百分比是相对于自身高度的，所以top:50%配合translateY(-50%)可实现居中效果

TIP

子元素的高度已知，translate()函数也可替换为margin-top: 负的高度值

<style>
.parent{
  position:relative;
}
.child{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
测试文字

3.2 若子元素定高，结合绝对定位的盒模型属性，实现居中效果

<style>
.parent{
  position: relative;
}
.child{
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 height: 50px;
}
</style>
测试文字

WARNING

在水平居中对齐中，元素外层套一层div并设置absolute，元素设置负margin-left或者relative的负left属性，可以实现水平居中的效果。但由于margin是相对于包含块宽度的，这样margin-top:-50%得到的是宽度而不是高度的-50%，所以不可行； 对于relative的百分比取值而言，在包含块高度为 auto 的情况下，chrome、safari 和 IE8+浏览器都不支持设置元素的百分比 top 值，所以也不可行

  1. flex

使用弹性盒模型 flex 实现垂直居中

4.1 在伸缩容器上设置侧轴对齐方式align-items: center

<style>
.parent{
  display: flex;
  align-items: center;
}
</style>

4.2 在伸缩项目上设置margin: auto 0

<style>
.parent{
  display: flex;
}
.child{
  margin: auto 0;
}
</style>
  1. grid

使用栅格布局grid实现垂直居中

5.1 在网格容器上设置align-items或align-content

<style>
.parent{
  display:grid;
  align-items:center;
 /*align-content:center;*/
}
</style>

5.2 在网格项目中设置align-self或者margin: auto 0

<style>
.parent{
  display:grid;
}
.child{
  align-self:center;
 /*margin: auto 0;*/
}
</style>

水平&垂直居中

  1. 水平对齐 + 行高
<style>
.test{
    text-align: center;
    line-height: 100px;
}
</style>
测试文字
  1. 水平 + 垂直对齐

2.1 父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素

<style>
.parent{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child{
    display: inline-block;
}
</style>
测试文字

2.2 若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为 0。子元素本身设置vertical-align:middle

<style>
.parent{
    text-align: center;
    line-height: 100px;
    font-size: 0;
}
.child{
    vertical-align: middle;
}
</style>
test
  1. margin + 垂直对齐

要想在父元素中设置vertical-align，须设置为table-cell元素；要想让margin:0 auto实现水平居中的块元素内容撑开宽度，须设置为table元素。而table元素是可以嵌套在tabel-cell元素里面的，就像一个单元格里可以嵌套一个表格

<style>
.parent{
    display:table-cell;
    vertical-align: middle;
}
.child{
    display: table;
    margin: 0 auto;
}
</style>
测试文字
  1. absolute

4.1 利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto

<style>
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    width: 80px;
    margin: auto;
}
</style>
测试文字

4.2 利用绝对定位元素的偏移属性和translate()函数的自身偏移达到水平垂直居中的效果

<style>
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
</style>
测试文字

4.3 在子元素宽高已知的情况下，可以配合margin负值达到水平垂直居中效果

<style>
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 60px;
    margin-left: -40px;
    margin-top: -30px;
}
</style>
测试文字
  1. flex

5.1 在伸缩容器上使用主轴对齐 justify-content 和侧轴对齐 align-items

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

5.2 在伸缩项目上使用 margin:auto

<style>
.parent{
    display: flex;
}
.child{
    margin: auto;
}
</style>
  1. grid

6.1 在网格容器上设置justify-items、align-items或justify-content、align-content

<style>
.parent{
    display: grid;
    align-items: center;
    justify-items: center;
    /* align-content: center; */
    /* justify-content: center; */
}
</style>

6.2 在网格项目中设置justify-self、align-self或者margin: auto

<style>
.parent{
    display: grid;
}
.child{
    align-self: center;
    justify-self: center;
/*     margin: auto; */
}
</style>
上次更新:
贡献者: liuzhu