Question

以下是我为简单的html表制作的代码。我的目标是根据设备的用户高度将整个表格垂直居中在页面中心。我尝试制作一个高度为100％且宽度为100％的div，并将桌子从顶部和左侧放置50％并且没有运气。有什么想法吗？

body {
    background-color: #a00000;
}
table {
    margin: 50px auto 25px auto;
    padding: 0px;
    background-color: #fff;
    border-radius: 10px;
}
td {
    background-color: #fff;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
}
img {
    max-width: 120px;
    max-height: 120px;
    border: solid 5px #a00000;
    border-radius: 5px;
    background-color: #a00000;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bobcat Menu</title>
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <table align="center">
            <tr>
                <td>
                    <a href="mobincube://action/section/DropDay">
                        <img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
                    </a>
                </td>
                <td>
                    <a href="mobincube://action/section/Schedule">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
                    </a>
                </td>      
            </tr>
            <tr>
                <td>
                    <a href="mobincube://action/section/Calculators">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
                    </a>
                </td>
                <td>
                    <a href="mobincube://action/section/News">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
                    </a>
                </td>      
            </tr>    
        </table>
    </body>
</html>

Answer 1

尝试将以下CSS规则添加到table元素：

table{
    /* ... */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Answer 2

您可以使用flexbox来获得您正在寻找的结果。

设置身体和身体html到height: 100%;

用包装div包裹表并使用：

.wrapper {
   display: flex;
   height: 100%;
}

将表边距设置为margin: auto;

这将确保您的餐桌总是完全居中。

body, html { 
    height: 100%;
}
body {
    background-color: #a00000;
    margin: 0; /* remove default margins added by browsers */
}
.wrapper {
   display: flex;
   height: 100%;
}
table {
    margin: auto;
    padding: 0px;
    background-color: #fff;
    border-radius: 10px;
}
td {
    background-color: #fff;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
}
img {
    max-width: 120px;
    max-height: 120px;
    border: solid 5px #a00000;
    border-radius: 5px;
    background-color: #a00000;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bobcat Menu</title>
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="wrapper">
        <table align="center">
            <tr>
                <td>
                    <a href="mobincube://action/section/DropDay">
                        <img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
                    </a>
                </td>
                <td>
                    <a href="mobincube://action/section/Schedule">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
                    </a>
                </td>      
            </tr>
            <tr>
                <td>
                    <a href="mobincube://action/section/Calculators">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
                    </a>
                </td>
                <td>
                    <a href="mobincube://action/section/News">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
                    </a>
                </td>      
            </tr>    
        </table>
        </div>
    </body>
</html>

Answer 3

display: table-cell;在父div上添加此项，然后在表格本身上使用vrtical-align。

html:
<div id="parent">
  <div id="child">Content here</div>
</div>

css:
#parent {display: table}

#child {
  display: table-cell;
  vertical-align: middle;
 }

Answer 4

我相信你可以做这样的事情让你自己垂直集中在任何给定的浏览器上。

table {
    margin: 50px auto 25px auto; 
    padding: 0px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    top: 50%;
    transform: translateY(50%);
}

https://jsfiddle.net/rodhartzell/s6x5toj9/

垂直居中的HTML表格

4 个答案: