如何将表格水平放置在 div 的中心？垂直

发布于 2024-11-29 13:01:53 字数 517 浏览 1 评论 0原文

我们可以将图像设置为

的背景图像，例如：

<style>
    #test { 

        background-image: url(./images/grad.gif); 
        background-repeat: no-repeat;
        background-position: center center; 

        width:80%; 
        margin-left:10%; 
        height:200px; 
        background-color:blue;

    }

</style>

<div id="test"></div>

我需要在

的中心水平设置一个表格 &垂直。是否有使用 CSS 的跨浏览器解决方案？

原文

We can set a image as background image of a <div> like:

<style>
    #test { 

        background-image: url(./images/grad.gif); 
        background-repeat: no-repeat;
        background-position: center center; 

        width:80%; 
        margin-left:10%; 
        height:200px; 
        background-color:blue;

    }

</style>

<div id="test"></div>

I need to set a table at the center of a <div> horizontally & vertically. Is there a cross-browser solution using CSS?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

左岸枫 2024-12-06 13:01:53

居中是 CSS 中最大的问题之一。但是，存在一些技巧：

要使表格水平居中，您可以将左右边距设置为自动：

<style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>

要垂直居中，唯一的方法是使用 javascript：

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools

不可能使用 vertical-align:middle因为表格是一个块而不是内联元素。

编辑

这里是一个总结 CSS 居中解决方案的网站： http://howtocenterincss.com/

Centering is one of the biggest issues in CSS. However, some tricks exist:

To center your table horizontally, you can set left and right margin to auto:

<style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>

To center it vertically, the only way is to use javascript:

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools

No vertical-align:middle is possible as a table is a block and not an inline element.

Edit

Here is a website that sums up CSS centering solutions: http://howtocenterincss.com/

回复收藏 0 原文

柳絮泡泡 2024-12-06 13:01:53

这对我有用：

#div {
  display: flex;
  justify-content: center;
}

#table {
  align-self: center;
}

这可以垂直和水平对齐。

Here's what worked for me:

#div {
  display: flex;
  justify-content: center;
}

#table {
  align-self: center;
}

And this aligned it vertically and horizontally.

回复收藏 0 原文

月亮是我掰弯的 2024-12-06 13:01:53

要水平居中定位，您可以说 width: 50%;边距：自动；。据我所知，这是跨浏览器的。对于垂直对齐，您可以尝试 vertical-align:middle;，但它可能仅适用于文本。不过还是值得一试。

回复收藏 0 原文

韬韬不绝 2024-12-06 13:01:53

只需将 margin: 0 auto; 添加到您的表格即可。无需向 div 添加任何属性

<div style="background-color:lightgrey">
 <table width="80%" style="margin: 0 auto; border:1px solid;text-align:center">
    <tr>
      <th>Name </th>
      <th>Country</th>
    </tr>
    <tr>
      <td>John</td>
      <td>US </td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>India </td>
    </tr>
 </table>
<div>

注意：为 div 添加背景颜色以可视化表格与其中心的对齐方式

Just add margin: 0 auto; to your table. No need of adding any property to div

<div style="background-color:lightgrey">
 <table width="80%" style="margin: 0 auto; border:1px solid;text-align:center">
    <tr>
      <th>Name </th>
      <th>Country</th>
    </tr>
    <tr>
      <td>John</td>
      <td>US </td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>India </td>
    </tr>
 </table>
<div>

Note: Added background color to div to visualize the alignment of table to its center

回复收藏 0 原文

罪#恶を代价 2024-12-06 13:01:53

此外，如果您想水平和垂直居中 -而不是采用流程设计（在这种情况下，应用以前的解决方案）-您可以这样做：

将主 div 声明为 absolute 或相对 定位（我称之为内容）。
声明一个内部 div，它实际上将保存表格（我称之为wrapper）。
在 wrapper div 内声明表本身。
应用 CSS 变换将包装对象的“注册点”更改为其中心。
将包装对象移动到父对象的中心。

#content {
  width: 5em;
  height: 5em;
  border: 1px solid;
  border-color: red;
  position: relative;
  }

#wrapper {
  width: 4em;
  height: 4em;
  border: 3px solid;
  border-color: black;
  position: absolute;
  left: 50%; top: 50%; /*move the object to the center of the parent object*/
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*these 5 settings change the base (or registration) point of the wrapper object to it's own center - so we align child center with parent center*/
  }

table {
  width: 100%;
  height: 100%;
  border: 1px solid;
  border-color: yellow;
  display: inline-block;
  }

<div id="content">
    <div id="wrapper">
        <table>
        </table>
    </div>
</div>

注意：您无法摆脱包装 div，因为这种样式不能直接在表格上工作，所以我使用 div 来包装它并定位它，而表格在 div 内部流动。

Additionally, if you want to center both horizontally and vertically -instead of having a flow-design (in such cases, the previous solutions apply)- you could do:

Declare the main div as absolute or relative positioning (I call it content).
Declare an inner div, which will actually hold the table (I call it wrapper).
Declare the table itself, inside wrapper div.
Apply CSS transform to change the "registration point" of the wrapper object to it's center.
Move the wrapper object to the center of the parent object.

#content {
  width: 5em;
  height: 5em;
  border: 1px solid;
  border-color: red;
  position: relative;
  }

#wrapper {
  width: 4em;
  height: 4em;
  border: 3px solid;
  border-color: black;
  position: absolute;
  left: 50%; top: 50%; /*move the object to the center of the parent object*/
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*these 5 settings change the base (or registration) point of the wrapper object to it's own center - so we align child center with parent center*/
  }

table {
  width: 100%;
  height: 100%;
  border: 1px solid;
  border-color: yellow;
  display: inline-block;
  }

<div id="content">
    <div id="wrapper">
        <table>
        </table>
    </div>
</div>

Note: You cannot get rid of the wrapper div, since this style does not work directly on tables, so I use a div to wrap it and position it, while the table is flowed inside the div.

回复收藏 0 原文

挽心 2024-12-06 13:01:53

您可以使用以下技术将框垂直和水平居中：

外部容器：

应具有 display: table;

内部容器：

应具有 display: table-cell; >
应该有 vertical-align: middle;
应该有 text-align: center;

内容框：

应该有 display: inline-block;

如果您使用此技术，只需添加您的表（以及您想要与之一起使用的任何其他内容）到内容框。

演示：

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <em>Data :</em>
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Anne</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Gina</td>
                <td>34</td>
            </tr>
        </table>
     </div>
   </div>
</div>

另请参阅这个小提琴！

You can center a box both vertically and horizontally, using the following technique :

The outher container :

should have display: table;

The inner container :

should have display: table-cell;
should have vertical-align: middle;
should have text-align: center;

The content box :

should have display: inline-block;

If you use this technique, just add your table (along with any other content you want to go with it) to the content box.

Demo :

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <em>Data :</em>
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Anne</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Gina</td>
                <td>34</td>
            </tr>
        </table>
     </div>
   </div>
</div>