CSS3 对齐方式

html元素的对齐方式

水平居中

.align{
  left: 0;
  right: 0;
  margin: auto;
}

垂直居中

.align{
  top: 0;
  bottom: 0;
  margin: auto;
}

水平垂直居中

.align{
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

html元素中内容的对齐方式

水平居中

内容水平居中
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。

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

垂直居中

内容垂直居中

.align{
  display: flex;
  align-items: center;
}

水平垂直居中

内容水平垂直居中

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

内容水平垂直居中，并将块级元素（block）转为行内元素（inline），取消元素自动换行

.align{
  display: inline-flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}