Question

如何将整个html正文与中心对齐？

Answer 1

我只是偶然发现了这个旧帖子，虽然我确定user01早已找到他的答案，但我发现当前的答案不太有效。在使用其他人提供的信息玩了一下之后，我发现了一个适用于IE，Firefox和Chrome的解决方案。在CSS中：

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

这与abernier的答案几乎完全相同，但我发现包括宽度会破坏居中，因为省略了自动边距。我希望其他任何偶然发现这个帖子的人会觉得我的答案很有帮助。

注意：忽略html, body { height: 100%; }仅水平居中。

Answer 2

您可以尝试：

body{ margin:0 auto; }

Answer 3

html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}

Answer 4

如果我有一件我喜欢与CSS分享的东西，那就是我在两个方向上的中心方式！

此方法的优点：

与人们实际使用的浏览器完全兼容
不需要桌子
高度可重复使用，以便将其父元素中的任何其他元素居中
为父母和孩子提供动态（不断变化）的尺寸！

我总是通过使用2个类来完成此操作：一个用于指定父元素，其内容将居中（.centered-wrapper），第二个用于指定父级的哪个子元素居中（{{1} }）。这个第二类在父有多个子节点的情况下很有用，但只有1个需要居中。在这种情况下，.centered-content将是body，内部.centered-wrapper将是div。

.centered-content

目标定位的目的是让<html> <head>...</head> <body class="centered-wrapper"> <div class="centered-content">...</div> </body> </html>成为.centered-content。这将轻松促进水平居中，通过inline-block，并允许垂直居中，如您所见。

text-align: center;

这为您提供了两个真正可重复使用的类，用于将任何父级内的任何子项集中在一起！只需添加.centered-wrapper { position: relative; text-align: center; } .centered-wrapper:before { content: ""; position: relative; display: inline-block; width: 0; height: 100%; vertical-align: middle; } .centered-content { display: inline-block; vertical-align: middle; }和.centered-wrapper类。

那么，.centered-content元素是怎么回事？它有助于:before并且是必要的，因为垂直对齐与父级的高度无关 - 垂直对齐是相对于最高兄弟的高度!!! 。因此，通过确保兄弟的高度是父母的身高（100％高度，0宽度使其不可见），我们知道垂直对齐将与父母的身高相关。

最后一件事：您需要确保您的vertical-align: middle;和html标记符合窗口的大小，以便以它们为中心与浏览器居中相同！

body

小提琴：https://jsfiddle.net/gershy/g121g72a/

Answer 5

http://bluerobot.com/web/css/center1.html

body {
    margin:50px 0; 
    padding:0;
    text-align:center;
}

#Content {
    width:500px;
    margin:0 auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

Answer 6

我在html上使用了flexbox。为了获得良好的效果，您可以匹配浏览器镶边，以便在大于页面最大值的屏幕尺寸上构建内容。我发现#eeeeee非常匹配。您可以为漂亮的浮动效果添加一个框阴影。

    html{
        display: flex;
        flex-flow: row nowrap;  
        justify-content: center;
        align-content: center;
        align-items: center;
        height:100%;
        margin: 0;
        padding: 0;
        background:#eeeeee;
    }
    body {
        margin: 0;
        flex: 0 1 auto;
        align-self: auto;
        /*recommend 1920 / 1080 max based on usage stats, use 100% to that point*/
        width: 100%
        max-width: 900px;
        height: 100%;
        max-height: 600px;
        background:#fafafa;
        -webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
    }

图片/数据礼貌StatCounter

Answer 7

<style>
        body{
            max-width: 1180px;
            width: 98%;
            margin: 0px auto;
            text-align: left;
        }
</style>

在应用任何CSS之前，只需应用此样式。您可以根据需要更改宽度。

Answer 8

只要写

<body>
   <center>
            *Your Code Here*
   </center></body>

Answer 9

尝试一下

body {
max-width: max-content;
margin: auto;
}

Answer 10

这个怎么样：

如果宽度：60%，则margin-left：(1-60%)/2 = 20%；
如果高度：50%，则margin-top：(1-50%)/2=25%；

margin-bottom 和 margin-right 也是如此；

<style type="text/css">
        html {
            height: 100%;
        }

        body {
            width: 60%;
            height: 50%;
            margin: 25% 20% 25% 20%;
            border: 1px solid;
        }
    </style>

如何将整个html体对齐到中心？

10 个答案: