在浏览器上居中元素答案

【问题标题】：Centering elements on the browser在浏览器上居中元素
【发布时间】：2017-11-04 06:22:55
【问题描述】：

我正在制作我的第一个网页模板，但我遇到了一些问题。我正在使用FullPage.js script，并且我想将使用此脚本添加的内容垂直和水平居中。这是我正在做的网站（fullpagewebsite.blogspot.com）。

如您所见，如果您使用键盘向下滚动，则会出现新内容。但是这个内容显示在那个奇怪而丑陋的位置（左上角）。

我希望此内容位于页面中心。

<table id="Table_01" width="900" height="400" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="5">
            <img src="BrowserPreview_tmp_01.png?1424981576" width="900" height="225" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="BrowserPreview_tmp_02.png?1424981576" width="84" height="175" alt=""></td>
        <td>
            <img src="BrowserPreview_tmp_03.png?1424981576" width="350" height="122" alt=""></td>
        <td>
            <img src="BrowserPreview_tmp_04.png?1424981576" width="52" height="122" alt=""></td>
        <td>
            <img src="BrowserPreview_tmp_05.png?1424981576" width="344" height="122" alt=""></td>
        <td>
            <img src="BrowserPreview_tmp_06.png?1424981576" width="70" height="122" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="BrowserPreview_tmp_07.png?1424981576" width="816" height="53" alt=""></td>
    </tr>
</table>

是的，我知道我正在使用表格，但我知道这不是一个好主意。但我需要使用 Photoshop 和 Photoshop 给我的代码。这些代码是表格。

我该怎么做才能使它居中？

【问题讨论】：

您正在使用 PhotoShop 作为 Web 创作工具？ PhotoShop 会生成您的 HTML？
你禁用了我的滚动条这一事实让我想戳点东西。
@GolezTrol 是的，您可以剪切图像，然后 Photoshop 会为您提供网站代码
@isherwood 哈哈抱歉，我会努力解决的
如果你继续沿着你要走的路走下去，你只会失望。近十年前，餐桌布局已经过时了，这是有充分理由的。要么升级 Photoshop，让它为您提供现代标记，要么阅读一些有关 HTML 和 CSS 的知识。如今，使用许多出色的示例网站作为指南，实现这种布局并不难。

标签： jquery html css html-table fullpage.js

【解决方案1】：

要使表格水平居中，您只需为表格提供“margin-left: auto; margin-right: auto;”的css属性/值

例如：

<table id="Table_01" width="900" height="400" border="0" cellpadding="0" cellspacing="0" style=" margin-left: auto; margin-right: auto; ">

就垂直居中而言，这变得更加棘手。您可以使用预定义的静态边距来执行此操作，即：“margin-top: 20px;”，或者您可以使用 Javascript 获取表格的高度，然后决定将其向下推多少。

一些可以工作的JS的例子如下：

<script>
$('#fullpage table').each(function() {
  $(this).css('margin-top', function(){
    return ($(this).parent().height() - $(this).height()) / 2;
  });
});
</script>

它会出现在页面底部。

编辑，现在还有 CSS 形式的选项可以进行垂直居中，但根据范围可能会变得乏味。有关此路线的更多信息，请参阅 Flexbox。

【讨论】：