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