frontend-tips CSS 布局入门如何完美垂直水平居中元素并制作等宽表格【免费下载链接】frontend-tipsSuper tiny, quick tips, tricks and best practices of front-end development项目地址: https://gitcode.com/gh_mirrors/fr/frontend-tipsfrontend-tips 是一个专门收集「超小、快速、即拿即用」前端开发技巧的开源项目内容覆盖 CSS、HTML、JavaScript、TypeScript 与浏览器开发者工具。本文从项目中挑出新手最头疼的两个布局场景——垂直水平居中一个元素和制作等宽表格用最少的代码讲清楚 3 种主流做法。为什么元素居中是布局入门的必考项把一个按钮、图片或卡片垂直方向和水平方向同时放到容器正中央是网页开发中最高频的布局需求之一弹窗、登录卡片、空状态占位……都离不开它。下面 3 种方法都出自项目中的 CSS 布局技巧任选其一即可。方法一用 Flexbox 垂直水平居中推荐Flexbox 是通用性最强的现代方案只需在容器上写 4 行声明子元素立刻居中.container { display: flex; flex-direction: column; align-items: center; justify-content: center; }align-items: center负责水平居中justify-content: center负责垂直居中子元素数量、大小变化都不影响效果方法二用 Grid 一行代码完成居中喜欢极简写法的话CSS Grid 一行就能达到同样效果.container { display: grid; place-content: center; }place-content是justify-contentalign-content的合并简写堪称当前最简洁的 CSS 居中技巧。⚡方法三绝对定位 translate 精准定位当元素是浮层如遮罩、弹层时用position定位更直观.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }思路很简单先把子元素挪到父元素的中心点top: 50%; left: 50%再用translate(-50%, -50%)把它按自身宽高的一半「拉回来」中心就落在容器正中央。三种方法的完整代码可以查看项目文件contents/center-an-element-vertically-and-horizontally.mdx。如何让表格所有列宽相等数据展示场景下一列宽一列窄的表格会显得杂乱。让表格列等宽有两种做法直接写死每列宽度适合固定列数列数已知时比如 4 列直接给单元格设width: 25%即可。但表格列数一旦动态变化这套写法就失效了。table td { width: 25%; }万能方案table-layout: fixed推荐列数不确定的表格用一行table-layout: fixed就能解决不管几列浏览器都会自动均分列宽table { table-layout: fixed; }相关技巧的完整说明在contents/make-a-table-with-equal-column-widths.mdx。进阶技巧让页脚始终贴在页面底部顺手再学一个经典布局——「粘性页脚」用 Flexbox 让页脚无论主内容多长都固定在最底部.container { display: flex; flex-direction: column; min-height: 100vh; } main { flex-grow: 1; }原理容器撑满一屏min-height: 100vh主内容flex-grow: 1吃掉剩余空间页脚自然被推到最下方。详见项目文件contents/always-put-the-footer-at-the-bottom.mdx。总结居中与表格布局速查表使用场景推荐方案核心代码通用容器居中Flexboxdisplay: flex 两个center极简一行居中Gridplace-content: center浮层、弹窗定位绝对定位translate(-50%, -50%)动态列数等宽表格固定布局table-layout: fixedfrontend-tips 中还有几十条这样「小而有用」的 CSS 布局、HTML 与 JavaScript 技巧每条都短小精悍、可直接落地。你也很欢迎把自己收藏的技巧按约定格式放进contents/目录与大家一起补充这份前端技巧清单。【免费下载链接】frontend-tipsSuper tiny, quick tips, tricks and best practices of front-end development项目地址: https://gitcode.com/gh_mirrors/fr/frontend-tips创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考