义

居中：盒子在其包含块中居中，包含块指的就是盒子的父级

分类

• 水平居中
• 垂直居中

水平居中

• 行盒、行块盒水平居中

找到行盒 或者行块盒的父元素，添加css样式代码：

{
  text-align: center
}

• 常规流块盒水平根据中

1. 定宽
2. 设置左右margin为auto

{
  width: 200px;
  margin: 0 auto;
}

• 绝对定位元素的水平居中

1. 定宽
2. 设置左右坐标为0
3. 设置左右margin为auto

{
  width: 200px;
  position: absolute
  left: 0;
  right: 0;
  margin: 0 auto;
}

垂直居中

• 单行文本的垂直居中

设置文本所在元素的行高，为整个区域的高度

{
  height: 200px;
  background: rgb(0, 255, 0);
  line-height: 200px;
}

• 行块盒或块盒内多行文本的垂直居中

垂直居中针对行块盒和块盒，由于行盒没有高度，在此略过。

另外此处的文本是直接写在行块盒或者块盒下的，没有其他元素包裹，这种情况下，是没有完美解决方法的（如果你有，欢迎交流），不过我们可以借助padding属性，设置盒子上下内边距相同，达到类似的居中效果

{
  background: rgb(0, 255, 0);
  display: inline-block;
  padding: 100px 0;
}

• 绝对定位的垂直居中

1. 定高
2. 设置上下坐标为0
3. 设置上下margin为auto

{
  height: 300px;
  background: rgb(0, 255, 0);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

总结

• 常见的行盒

文字元素：span、abbr、em、i、strong、b

图片和多媒体：img、video、audio

• 部分情况居中时，需要设置盒子高度

好了，本文就写到这里，如果觉得能帮到你，欢迎关注我，如果觉得有写的不对的地方，欢迎评论指出来，我会及时改正，相互学习，相互交流才能进步~~~

层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS中几种常用的水平垂直居中对齐方法：

文字的水平垂直居中

text-align:center;

line-height:当前元素高度;

元素的水平垂直居中

1使用绝对定位

/*需要固定宽高*/

position:absolute;

top:0;

left:0;

bottom:0;

right:0;

width:xxx;

height:xxx

margin:auto;

2使用绝对定位+calc()

/*需要知道具体的元素宽高值*/

position:absolute;

width:xxx;

height:xxx;

top:calc(50%-xxx/2);

left:calc(50%-xxx/2)

3.使用绝对定位+transform

/*不需要知道元素的宽高*/

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

4.使用display:flex;

display:flex;

justify-content:center;

align-items:center;

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在web设计领域是一个突破，利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

以上是酷仔今日整理的“Web前端基础教程：CSS中几种常用的水平垂直居中对齐方法”一文，希望为正在学习Web前端的同学提供参考。

者：张鑫旭

https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/