CSS 实现了高宽的平等

日期：2023-10-05 02:41

CSS 实现了高宽的平等：

//方法一：CSS表格布局实现
。容器 {
显示：表；
宽度：100%；
高度：100%；
}
。物品 {
显示：表格单元格；
垂直对齐：居中；
文本对齐：居中；
}
// 方法二：Flex布局实现
。容器 {
显示：柔性；
调整内容：居中；
对齐项目：居中；
}
。物品 {
弹性：1；
宽度：100%；
高度：100%；
文本对齐：居中；
}
// 方法三：绝对定位布局实现
。容器 {
位置：相对；
宽度：100%；
高度：100%；
}
。物品 {
位置：绝对；
顶部：0；
左：0；
右：0；
底部：0；
保证金：自动；
宽度：80%；
身高：80%；
文本对齐：居中；
}
// 方法4：网格布局实现
。容器 {
显示：网格；
网格模板列：重复（自动调整，minmax（200px，1fr））；
网格自动行：minmax（200px，自动）；
网格间隙：10px；
}
。物品 {
宽度：100%；
高度：100%；
文本对齐：居中；
}

以上是常用的几种方法。具体选择方式需要根据实际场景判断。一般来说，CSS表格布局和Flex布局比较常用，其实现也比较简单明了。如果有必要，您可以尝试其他方法，例如网格布局。

最近发表

猜你喜欢

CSS 实现了高宽的平等

相关文章