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

时间：2022-03-08 19:17:00

How do I align entire html body to the center ?

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

7 个解决方案

#1

83  

I just stumbled on this old post, and while I'm sure user01 has long since found his answer, I found the current answers don't quite work. After playing around for a little bit using info provided by the others, I found a solution that worked in IE, Firefox, and Chrome. In CSS:

我刚刚偶然发现了这篇旧文章，虽然我确信user01早就找到了他的答案，但我发现当前的答案并不十分有效。在试用了其他人提供的信息之后，我找到了一个在IE、Firefox和Chrome中工作的解决方案。在CSS中:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

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

This is almost identical to abernier's answer, but I found that including width would break the centering, as would omitting the auto margin. I hope anyone else who stumbles on this thread will find my answer helpful.

这和阿伯尼尔的答案几乎是一样的，但是我发现包括宽度会打破定心，就像省略了自动边距一样。我希望在这个问题上遇到困难的人都能找到我的答案。

Note: Omit html, body { height: 100%; } to only center horizontally.

注意:省略html，正文{高度:100%;只有水平的中心。

#2

20  

You can try:

你可以尝试:

body{ margin:0 auto; }

#3

12  

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

#4

8  

If I have one thing that I love to share with respect to CSS, it's MY FAVE WAY OF CENTERING THINGS ALONG BOTH AXES!!!

如果我有一件我喜欢分享的关于CSS的事情，那就是我喜欢的在两个坐标轴上围绕事物的方式!!!

Advantages of this method:

该方法的优点:

  1. Full compatibility with browsers that people actually use
  2. 完全兼容人们实际使用的浏览器
  3. No tables required
  4. 不需要表
  5. Highly reusable for centering any other elements inside their parent
  6. 高度可重用的，以其父元素中的任何其他元素为中心
  7. Accomodates parents and children with dynamic (changing) dimensions!
  8. 为父母和孩子提供动态的(变化的)尺寸!

I always do this by using 2 classes: One to specify the parent element, whose content will be centered (.centered-wrapper), and the 2nd one to specify which child of the parent is centered (.centered-content). This 2nd class is useful in the case where the parent has multiple children, but only 1 needs to be centered). In this case, body will be the .centered-wrapper, and an inner div will be .centered-content.

我总是通过使用两个类来实现这一点:一个用于指定父元素，其内容将居中(.center -wrapper)，另一个用于指定父元素的子元素居中(.center -content)。如果父类有多个子类，但只需要将1居中，则第二个类是有用的)。在本例中，body将是.center -wrapper，而内部div将是.center -content。

<html>
    <head>...</head>
    <body class="centered-wrapper">
        <div class="centered-content">...</div>
    </body>
</html>

The idea for centering will now be to make .centered-content an inline-block. This will easily facilitate horizontal centering, through text-align: center;, and also allows for vertical centering as you shall see.

以中心为中心的想法现在将使.center -content成为一个内嵌块。通过文本对齐:居中，这将很容易实现水平定心，而且还可以实现垂直定心。

.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;
}

This gives you 2 really reusable classes for centering any child inside of any parent! Just add the .centered-wrapper and .centered-content classes.

这为您提供了两个真正可重用的类，用于将任何父类中的任何子类居中!只需添加.center -wrapper和.center -content类。

So, what's up with that :before element? It facilitates vertical-align: middle; and is necessary because vertical alignment isn't relative to the height of the parent - vertical alignment is relative to the height of the tallest sibling!!!. Therefore, by ensuring that there is a sibling whose height is the parent's height (100% height, 0 width to make it invisible), we know that vertical alignment will be with respect to the parent's height.

那么，在元素之前是什么呢?它促进vertical-align:中间;而且是必要的，因为垂直对齐与父结点的高度无关——垂直对齐与最高的兄弟结点的高度有关!!因此，通过确保有一个兄弟姐妹的高度是父节点的高度(100%高度，0宽度使其不可见)，我们知道垂直对齐将与父节点的高度相关。

One last thing: You need to ensure that your html and body tags are the size of the window so that centering to them is the same as centering to the browser!

最后一件事:您需要确保您的html和主体标记是窗口的大小，以便以它们为中心与以浏览器为中心相同!

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

Fiddle: https://jsfiddle.net/gershy/g121g72a/

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

#5

7  

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

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;
}

#6

4  

I use flexbox on html. For a nice effect, you can match the browsers chrome so as to frame your content on screen sizes larger than your page maximums. I find that #eeeeee matches pretty well. You could add a box shadow for a nice float effect.

我在html上使用flexbox。为了达到更好的效果，您可以匹配浏览器chrome，以便在比页面最大值更大的屏幕上显示内容。我觉得这很适合。你可以添加一个框阴影为一个漂亮的浮动效果。

    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);
    }

如何将整个html主体对齐到中心? 如何将整个html主体对齐到中心? image/data courtesy StatCounter

图像/礼貌StatCounter的数据

#7

3  

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

Just apply this style before applying any CSS. You can change width as per your need.

在应用CSS之前，先应用这个样式。您可以根据需要更改宽度。

#1

83  

I just stumbled on this old post, and while I'm sure user01 has long since found his answer, I found the current answers don't quite work. After playing around for a little bit using info provided by the others, I found a solution that worked in IE, Firefox, and Chrome. In CSS:

我刚刚偶然发现了这篇旧文章，虽然我确信user01早就找到了他的答案，但我发现当前的答案并不十分有效。在试用了其他人提供的信息之后，我找到了一个在IE、Firefox和Chrome中工作的解决方案。在CSS中:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

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

This is almost identical to abernier's answer, but I found that including width would break the centering, as would omitting the auto margin. I hope anyone else who stumbles on this thread will find my answer helpful.

这和阿伯尼尔的答案几乎是一样的，但是我发现包括宽度会打破定心，就像省略了自动边距一样。我希望在这个问题上遇到困难的人都能找到我的答案。

Note: Omit html, body { height: 100%; } to only center horizontally.

注意:省略html，正文{高度:100%;只有水平的中心。

#2

20  

You can try:

你可以尝试:

body{ margin:0 auto; }

#3

12  

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

#4

8  

If I have one thing that I love to share with respect to CSS, it's MY FAVE WAY OF CENTERING THINGS ALONG BOTH AXES!!!

如果我有一件我喜欢分享的关于CSS的事情，那就是我喜欢的在两个坐标轴上围绕事物的方式!!!

Advantages of this method:

该方法的优点:

  1. Full compatibility with browsers that people actually use
  2. 完全兼容人们实际使用的浏览器
  3. No tables required
  4. 不需要表
  5. Highly reusable for centering any other elements inside their parent
  6. 高度可重用的，以其父元素中的任何其他元素为中心
  7. Accomodates parents and children with dynamic (changing) dimensions!
  8. 为父母和孩子提供动态的(变化的)尺寸!

I always do this by using 2 classes: One to specify the parent element, whose content will be centered (.centered-wrapper), and the 2nd one to specify which child of the parent is centered (.centered-content). This 2nd class is useful in the case where the parent has multiple children, but only 1 needs to be centered). In this case, body will be the .centered-wrapper, and an inner div will be .centered-content.

我总是通过使用两个类来实现这一点:一个用于指定父元素，其内容将居中(.center -wrapper)，另一个用于指定父元素的子元素居中(.center -content)。如果父类有多个子类，但只需要将1居中，则第二个类是有用的)。在本例中，body将是.center -wrapper，而内部div将是.center -content。

<html>
    <head>...</head>
    <body class="centered-wrapper">
        <div class="centered-content">...</div>
    </body>
</html>

The idea for centering will now be to make .centered-content an inline-block. This will easily facilitate horizontal centering, through text-align: center;, and also allows for vertical centering as you shall see.

以中心为中心的想法现在将使.center -content成为一个内嵌块。通过文本对齐:居中，这将很容易实现水平定心，而且还可以实现垂直定心。

.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;
}

This gives you 2 really reusable classes for centering any child inside of any parent! Just add the .centered-wrapper and .centered-content classes.

这为您提供了两个真正可重用的类，用于将任何父类中的任何子类居中!只需添加.center -wrapper和.center -content类。

So, what's up with that :before element? It facilitates vertical-align: middle; and is necessary because vertical alignment isn't relative to the height of the parent - vertical alignment is relative to the height of the tallest sibling!!!. Therefore, by ensuring that there is a sibling whose height is the parent's height (100% height, 0 width to make it invisible), we know that vertical alignment will be with respect to the parent's height.

那么，在元素之前是什么呢?它促进vertical-align:中间;而且是必要的，因为垂直对齐与父结点的高度无关——垂直对齐与最高的兄弟结点的高度有关!!因此，通过确保有一个兄弟姐妹的高度是父节点的高度(100%高度，0宽度使其不可见)，我们知道垂直对齐将与父节点的高度相关。

One last thing: You need to ensure that your html and body tags are the size of the window so that centering to them is the same as centering to the browser!

最后一件事:您需要确保您的html和主体标记是窗口的大小，以便以它们为中心与以浏览器为中心相同!

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

Fiddle: https://jsfiddle.net/gershy/g121g72a/

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

#5

7  

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

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;
}

#6

4  

I use flexbox on html. For a nice effect, you can match the browsers chrome so as to frame your content on screen sizes larger than your page maximums. I find that #eeeeee matches pretty well. You could add a box shadow for a nice float effect.

我在html上使用flexbox。为了达到更好的效果，您可以匹配浏览器chrome，以便在比页面最大值更大的屏幕上显示内容。我觉得这很适合。你可以添加一个框阴影为一个漂亮的浮动效果。

    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);
    }

如何将整个html主体对齐到中心? 如何将整个html主体对齐到中心? image/data courtesy StatCounter

图像/礼貌StatCounter的数据

#7

3  

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

Just apply this style before applying any CSS. You can change width as per your need.

在应用CSS之前，先应用这个样式。您可以根据需要更改宽度。

标签：

相关文章