<body> 中的 <main> 内容居中

Question

我想在页面上水平和垂直居中 MAIN 的内容，但无论我尝试哪种解决方案，它都行不通。我对 atm 感到非常沮丧，因为我让它工作了，然后我做了很多改变，它自己重置了。

也许有人可以查看它并给我提示我哪里错了。谢谢。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

/********** LANDINGPAGE.CSS **********/
/**********  **********/
*, header, footer {
font-family: 'Roboto', sans-serif;
font-size: 1vw;
color: #4c4c4c;
letter-spacing: 0.05em;
text-decoration: none;
}

h1 {
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 4vw;
}


/********** SITE **********/
.wrap_site {
max-width: 100%;
margin: 0 5%;
}

.wrap_content {
display: flex;
align-items: center;
justify-content: center;
}

.button {
border: 1px solid #4c4c4c;
display: inline-block;
cursor: pointer;
font-size: 1vw;
padding: 8px 18px;
background-color: white;
}

.button:hover {
transition: background-color 0.5s ease;
color: white;
background-color: #4c4c4c;
}


/********** HEADER **********/
.wrap_header {
left: 0;
right: 0;
top: 0;
border-bottom: 1px solid #4c4c4c;
padding-top: 1rem;
padding-bottom: 1rem;
}

header {
display: flex;
justify-content: space-between;
}


/********** FOOTER **********/
.wrap_footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 5%;
border-top: 1px solid #4c4c4c;
padding-top: 1rem;
padding-bottom: 1rem;
}

footer {
display: flex;
justify-content: space-between;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <div class="wrap_site">
 <div class="wrap_header">
  <header>
   <p></p> <!-- filler -->
   <p>This website is currently under construction.</p> </header> </div>
      
 <main class="wrap_content">
  <h1>Hi, my name is x. Welcome to my website.</h1>
  <h2 id="translate">你好, 我叫 x。欢迎来到我的网站。</h2>
  </br>
  <h2><a href="#" class="button">ABOUT ME</a></h2> </main>
  
 <div class="wrap_footer">
  <footer>
   <a href="mailto:x">contact@x.com  </a>
   <a href="imprint">⚖️ Imprint</a> </footer> </div> </div>

<!-- AUTOTRANSLATE -->
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/x-javascript">
jQuery(function ($) {
    var languages = ["¡Hola, me llamo x! Bienvenido a mi página web.", "Привет, меня зовут x. Добро пожаловать на мой сайт.","Hallo, ich heiße x. Willkommen auf meiner Webseite.", "你好, 我叫 x。欢迎来到我的网站。"];
    var counter = 0;
    var $exc = $('#translate')
    setInterval(function () {
        $exc.text(languages[counter++]);
        if (counter >= languages.length) {
            counter = 0;
        }
    }, 2500)
})
</script>
</body>
</html>

Answer 1

为了集中内容，您要做的是将以下内容应用于 body 和 .wrap_content（也可能 .wrap_site）：

display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

而下面的纯 body:

height: 100vh;

结果如下：

jQuery(function($) {
  var languages = ["¡Hola, me llamo x! Bienvenido a mi página web.", "Привет, меня зовут x. Добро пожаловать на мой сайт.", "Hallo, ich heiße x. Willkommen auf meiner Webseite.", "你好, 我叫 x。欢迎来到我的网站。"];
  var counter = 0;
  var $exc = $('#translate')
  setInterval(function() {
    $exc.text(languages[counter++]);
    if (counter >= languages.length) {
      counter = 0;
    }
  }, 2500)
})

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/********** LANDINGPAGE.CSS **********/


/**********  **********/

*,
header,
footer {
  font-family: 'Roboto', sans-serif;
  font-size: 1vw;
  color: #4c4c4c;
  letter-spacing: 0.05em;
  text-decoration: none;
}

h1 {
  font-family: 'Lato', sans-serif;
  font-weight: normal;
  font-size: 4vw;
}


/********** SITE **********/

.wrap_site {
  max-width: 100%;
  margin: 0 5%;
  display: flex;
  flex-direction: column;
}

.wrap_content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.button {
  border: 1px solid #4c4c4c;
  display: inline-block;
  cursor: pointer;
  font-size: 1vw;
  padding: 8px 18px;
  background-color: white;
}

.button:hover {
  transition: background-color 0.5s ease;
  color: white;
  background-color: #4c4c4c;
}


/********** HEADER **********/

.wrap_header {
  left: 0;
  right: 0;
  top: 0;
  border-bottom: 1px solid #4c4c4c;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

header {
  display: flex;
  justify-content: space-between;
}


/********** FOOTER **********/

.wrap_footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 5%;
  border-top: 1px solid #4c4c4c;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

footer {
  display: flex;
  justify-content: space-between;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="wrap_site">
    <div class="wrap_header">
      <header>
        <p></p>
        <!-- filler -->
        <p>This website is currently under construction.</p>
      </header>
    </div>

    <main class="wrap_content">
      <h1>Hi, my name is x. Welcome to my website.</h1>
      <h2 id="translate">你好, 我叫 x。欢迎来到我的网站。</h2>
      <br />
      <h2><a href="#" class="button">ABOUT ME</a></h2>
    </main>

    <div class="wrap_footer">
      <footer>
        <a href="mailto:x">contact@x.com  </a>
        <a href="imprint">⚖️ Imprint</a> </footer>
    </div>
  </div>

</body>

</html>

此外，请注意，您在示例中声明 jQuery 在 HTML 之外 （除了将其加载到 <body>).我假设这个加倍只是由于包含一个 Stack Snippet，但请注意 jQuery 应该从你的 <head> 部分加载，并且只包含一次 .

希望对您有所帮助！ :)

Answer 2

检查我的解决方案：

https://codepen.io/Czeran/pen/OjpKoj?editors=1100

我在 body 元素上使用了 display: flex 并添加到 header position: absolute;

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5%;
}

Answer 3

添加高度并使用flex-direction:

.wrap_site {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

JSFiddle 演示：https://jsfiddle.net/435xvrm0/2/

<body> 中的 <main> 内容居中

Centering <main> content in <body>

html

css

centering

flexbox