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; /* 垂直居中 */
}