【CSS】水平垂直居中（变宽高）的4种实现

时间：2023-03-30 22:51:35 CSS

水平垂直居中的4种方案（变宽高）方案里我也给了宽高，但是不代表宽度和高度是固定的。反而觉得不给宽高是看不到效果的。该方案没有固定的宽高，也就是说使用该方案后，如果你的父元素和子元素的宽高发生变化，仍然可以保证水平和垂直居中。以下四种方案均可实施。当父元素或子元素的宽高发生变化时，仍然保持水平和垂直居中布局。方案一：定位html

css.father{position:relative;宽度：200px；高度：200px；背景：天蓝色；}.son{位置：绝对；顶部：50%；左：50%；转换：翻译（-50%，-50%）；宽度：100px；高度：100px；背景：红色；}选项2：flexhtml不变

css.father{display:flex;证明内容：居中；对齐项目：居中；宽度：200px；高度：200px；背景：天蓝色；}.son{宽度：100px；高度：100px；背景：红色；}方案三：表格布局需要设置父元素为display:table-cell，使用vertical和text-align允许所有内联块级元素水平和垂直居中，并为子元素设置显示：inline-blockhtmlunchangedcss.father{显示：表格单元格；宽度：200px；高度：200px；背景：天蓝色；垂直对齐：中间；文本对齐：居中；}.son{显示：内联块；宽度：100px；高度：100px；：红色的;}方案四：网格布局（最新浏览器支持）html不变css不变。父亲{显示：网格；对齐项目：居中；证明内容：居中；宽度：200px；高度：200px；背景：天蓝色；

上一篇：无意中发现了另一种跨域方法，不知道有没有人这样玩过

下一篇：后台管理项目问题总结

【CSS】水平垂直居中（变宽高）的4种实现相关文章