如何调整整个 html 机构的中心？

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

492959 次浏览
小开

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

剪辑

从今天起，使用 Flexbox，你可以:

body {
display:flex; flex-direction:column; justify-content:center;
min-height:100vh;
}

最好

与另一种柔性盒式自动保证金技术相比:

body {
display:flex;
min-height:100vh;
}
body >div {margin:auto;}

第一个，并不要求您将所有内容都包装到 div 中！

上一个答案

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

我只是偶然发现了这篇老文章，虽然我确信 user01很久以前就已经找到了他的答案，但是我发现当前的答案并不完全有效。在使用了其他人提供的信息后，我找到了一个可以在 IE、 Firefox 和 Chrome 中工作的解决方案。在 CSS 中:

html, body {
height: 100%;
}


html {
display: table;
margin: auto;
}


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

这几乎与阿伯尼尔的答案相同，但我发现，包括宽度将打破中心，因为将省略自动边距。我希望其他碰巧发现这个帖子的人会觉得我的答案有帮助。

注意: 水平方向只将 html, body { height: 100%; }省略为居中。

小开

你可以试试:

body{ margin:0 auto; }
小开

如果我有一件事情，我喜欢分享关于 CSS，它是 我最喜欢的两个轴对齐的方式! ! ！

这种方法的优点 :

  1. 与人们实际使用的浏览器完全兼容
  2. 不需要桌子
  3. 高度可重用，可以将其他元素集中在父元素中
  4. 为父母和孩子提供动态(变化)的空间！

我总是通过使用两个类来实现这一点: 一个类指定父元素，其内容将居中(.centered-wrapper) ，第二个类指定父元素的哪个子元素居中(.centered-content)。这第二个类在父类有多个子类，但是只需要以1为中心的情况下很有用)。 在这种情况下，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元素是怎么回事？它有利于 vertical-align: middle;，并且是必要的，因为垂直对齐不相对于父 垂直排列是相对于最高的兄弟姐妹的高度! ! ！的高度。因此，通过确保有一个兄弟姐妹的高度是父级的高度(100% high，0 width 使其不可见) ，我们知道垂直对齐将相对于父级的高度。

最后一件事: 您需要确保您的 html和 body标记是窗口的大小，以便以它们为中心就等同于以浏览器为中心！

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

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

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

在应用任何 CSS 之前应用这个样式。你可以根据你的需要改变宽度。

小开

我在 html上使用柔性箱。为了获得一个好的效果，你可以匹配浏览器的铬，以框架您的内容在屏幕大于您的页面最大尺寸。我发现 #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);
}

enter image description here enter image description here StatCounter

小开

写吧

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

试试这个

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

这个怎么样:

  • 如果 宽度: 60% ，则为 左边距: (1-60%)/2 = 20% ;
  • 如果 身高: 50% ，则为 (1-50%)/2 = 25% ;

边际-底部和边际-右边也是如此;

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


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

小开 
<body class="center">
<div align="center">
</div>
</body>

这是我用的代码，用的是 Glitch.me。


提交答案