在 CSS 中,可以使用 display:flex
和 align-items:center
来控制垂直居中对齐方式,使用 justify-content:center
来控制水平居中对齐方式。
具体步骤如下:
display
属性设为 flex
,这样就可以使用强大的 flexbox 布局。.parent {
display: flex;
}
align-items
属性将子元素在垂直方向上居中对齐。.parent {
display: flex;
align-items: center; /* 垂直居中 */
}
justify-content
属性将子元素在水平方向上居中对齐。.parent {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
这样,就可以实现垂直居中和水平居中了。需要注意的是,只有在父元素的高度和宽度确定的情况下才能使用居中对齐方式。
关键词:display:flex
、align-items:center
、justify-content:center
、flexbox布局