align

水平居中:

内联元素居中，使用text-align: center

I'm a block level element and am centered.

块级元素居中，使用margin: 0 auto

I'm an element that is block-like with my siblings and we're centered in a row.

I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.

I'm an element that is block-like with my siblings and we're centered in a row.

多列元素居中，使用display: inline-block; text-align:center

垂直居中:

We're Centered Bits of Text

文本垂直居中方法1：设置padding 上下间距一样即可

We're Centered Bits of Text

文本垂直居中方法2：设置line-light和height一样即可

I'm an element that is block-like with my siblings and we're centered in a row.

I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.

I'm an element that is block-like with my siblings and we're centered in a row.

多行垂直居中，使用flex布局, display: flex; justify-content: center; flex-direction: column;

hehe i am the child inside 单个块级元素的垂直方向居中，在知道子级block的高度时，父级设置为相对定位，子级设置为绝对定位

单个块级元素的垂直方向居中, 在`不知道`子级block的高度时，父级设置为相对定位，子级设置为绝对定位， top:50%, left:50, transform: translate(-50%,-50%) transform中translate偏移的百分比值是相对于自身大小的

hehe i am the child inside

`Negative Margins`负外边距单个块级元素的垂直方向居中, 在`知道`子级block的高度时，父级设置为相对定位，子级设置为绝对定位， top:50%, left:50%, height: Xpx; width: Ypx; margin-left: -1/2*X px; margin-top: -1/2*Y px;

hehe i am the child inside

绝对定位居中设置父级元素为relative定位，设置子级为 position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; width: 50%; height: 50%;

hehe i am the child inside

优先推荐使用flex 布局单个块级元素的垂直且水平方向居中, 设置父级元素为 display: flex; justify-content: center; //主轴方向上的对齐 align-items: center; //交叉轴方向上的对齐