css块元素对齐 |css文字跳入特效

/* 水平居中对齐 */
.center {
display: flex;
justify-content: center;
align-items: center;
}
/* 左对齐 */
.left {
text-align: left;
}
/* 右对齐 */
.right {
text-align: right;
}
/* 垂直居中对齐 */
.vertical {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

第一种方式是使用 flex 布局来实现水平居中对齐。在父元素中设置display: flex;，并结合justify-content: center;和align-items: center;属性，可以让子元素在水平和垂直方向上都居中。例如，上面的例子就是将一个div水平居中对齐。

第二种方式是使用text-align属性来实现左对齐或右对齐。将该属性设置为left可以让元素左对齐，将其设置为right可以让元素右对齐。例如，页面中的段落默认就是左对齐的。

第三种方式是使用 flex 布局来实现垂直居中对齐。在父元素中设置display: flex;，并结合justify-content: center;、align-items: center;和flex-direction: column;属性，可以让子元素在垂直方向上居中，且每个元素在各自的行中居中。例如，上面的例子就是将两个p元素垂直居中对齐。