css表格中如何居中

来源：图像处理网作者：新井头衔：网络博主

导读：本期聚焦于小伙伴创作的《css表格中如何居中》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《css表格中如何居中》有用，将其分享出去将是对创作者最好的鼓励。

在网页布局中，表格的居中需求分为两种，一种是整个表格在父容器中水平居中，另一种是表格内部的单元格内容实现水平和垂直居中，不同的需求对应不同的CSS实现方案。

css表格中如何居中

整个表格在父容器中水平居中

如果希望整个表格在父容器里水平居中，最常用的方法是给表格设置margin: 0 auto，这个属性会让块级元素在水平方向自动分配左右外边距，从而实现居中效果。需要注意的是，表格默认是inline-block类型，需要先将其设置为块级元素才能生效。

/* 整个表格水平居中 */
table {
    display: block; /* 转为块级元素 */
    margin: 0 auto; /* 左右外边距自动 */
    width: 80%; /* 设置表格宽度，避免占满父容器 */
}

如果父容器是flex布局，也可以直接给父容器设置justify-content: center，不需要修改表格本身的属性，这种方式适配性更好，适合现代布局场景。

/* 父容器为flex布局时居中表格 */
.parent-container {
    display: flex;
    justify-content: center; /* 子元素水平居中 */
}
table {
    width: 80%;
}

要让表格单元格里的文字或内联元素水平居中，只需要给td或者th元素设置text-align: center即可，这个属性会作用于单元格内的所有内联内容。

/* 单元格内容水平居中 */
td, th {
    text-align: center;
}

单元格内容的垂直居中可以通过vertical-align: middle实现，这个属性是表格单元格的默认垂直对齐方式，不过如果单元格设置了固定高度或者内容高度不一致，显式设置会更稳定。

/* 单元格内容垂直居中 */
td, th {
    vertical-align: middle;
    height: 60px; /* 设置固定高度，更直观看到垂直居中效果 */
}

实际开发中经常需要单元格内容同时水平和垂直居中，只需要把text-align和vertical-align两个属性结合使用即可。

/* 单元格内容同时水平垂直居中 */
td, th {
    text-align: center;
    vertical-align: middle;
    height: 60px;
}

设置margin: 0 auto让整个表格居中时，必须给表格设置明确的宽度，否则表格会默认占满父容器宽度，无法看出居中效果。另外vertical-align属性只对表格单元格、行内元素等有效，对块级元素单独使用不会生效，不要误用在非表格元素上。

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。