div中的table水平居中 css
要使<div>中的<table>水平居中，可以使用CSS来实现。以下是几种常见的方法：
方法一：使用margin: auto;
这是最简单的方法之一，适用于大多数情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Table in Div</title>
<style>
.container {
width: 100%;
text-align: center;
}
table {
display: inline-table;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</div>
</body>
</html>方法二：使用Flexbox
Flexbox是一种现代的布局方法，可以轻松实现居中对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Table in Div</title>
<style>
.container {
width: 100%;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</div>
</body>
</html>方法三：使用CSS Grid
CSS Grid也是一种强大的布局工具，可以实现复杂的居中对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Table in Div</title>
<style>
.container {
width: 100%;
display: grid;
place-items: center;
}
</style>
</head>
<body>
<div class="container">
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</div>
</body>
</html>常见问题及解决方法
- 表格宽度超出容器：如果表格宽度大于容器宽度，可以使用
max-width属性来限制表格的最大宽度。 - 表格宽度超出容器：如果表格宽度大于容器宽度，可以使用
max-width属性来限制表格的最大宽度。 - 表格内容居中：如果需要表格内容也居中，可以使用
text-align: center;。 - 表格内容居中：如果需要表格内容也居中，可以使用
text-align: center;。
通过以上方法，可以轻松实现<div>中的<table>水平居中。选择哪种方法取决于具体的需求和布局情况。
相关·内容
没有搜到相关的文章
云服务器
ICP备案
对象存储
云点播
实时音视频
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号