如何将整个html正文alignment到中心?

如何将整个HTML正文与中心alignment?

我刚刚偶然发现了这个旧post,虽然我确信user01早已find答案,但我发现目前的答案并不奏效。 使用其他人提供的信息稍微玩了一会之后,我发现了一个在IE,Firefox和Chrome上运行的解决scheme。 在CSS中:

html, body { height: 100%; } html { display: table; margin: auto; } body { display: table-cell; vertical-align: middle; } 

这与阿维尼尔的回答几乎相同,但是我发现包括宽度会打破居中,同样省略了自动边距。 我希望任何人在这个线程上绊倒会发现我的答案有帮助。

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

你可以试试:

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

如果我有一件事情,我喜欢与CSS分享,这是我的两个轴心的中心事情的方式!

这种方法的优点

  1. 与人们实际使用的浏览器完全兼容
  2. 没有要求的表格
  3. 高度可重用的集中在父母的任何其他元素
  4. 适应父母和孩子dynamic(变化)的尺寸!

我总是通过使用2个类来做到这一点:一个用于指定父元素,其内容将居中( .centered-wrapper ),第二个用于指定父元素的哪个子元素( .centered-content )。 这个第二类在父母有多个孩子的情况下是有用的,但是只有一个需要居中)。 在这种情况下, body将是.centered-wrapper ,而inner div将是.centered-content

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

集中的想法现在是使.centered-content成为inline-block 。 这将通过text-align: center; 轻松实现水平居中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; } 

这给你2个真正可重用的类,用于居中任何父项内的任何子项! 只需添加.centered-wrapper.centered-content类。

那么,这是怎么回事:before元素:before ? 它有利于vertical-align: middle; 这是必要的,因为垂直alignment不是相对于父母的高度 – 垂直alignment是相对于最高的兄弟姐妹的身高! 。 因此,通过确保有一个兄弟姐妹的身高是父母的身高(100%的身高,0的宽度使其不可见),我们知道父母的身高是垂直的。

最后一件事情是:你需要确保你的htmlbody标签是窗口的大小,以便集中到浏览器中心!

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

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

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

或者你可以添加这个最简单的方法<body style="text-align: center;">

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

只是在应用任何CSS之前应用这种风格。 您可以根据需要更改宽度。