<main> 将<body>内容居中

我想将MAIN的内容水平和垂直居中放在页面上，但是无论我尝试哪种解决方案，它都没有奏效。我非常沮丧的自动取款机，因为我让它工作，然后我改变了很多，它自己重置了。

也许有人可以查看它并给我一个提示，我错在哪里。谢谢。

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>

为了集中内容，您要做的是将以下内容应用于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>

另外，请注意，您在示例中在HTML之外声明了jQuery(除了在<body>中加载它之外(。我认为这种双重只是由于包含一个堆栈片段，但请注意，jQuery 应该从您的<head>部分内部加载，并且只包含一次。

希望这有帮助！ :)

Chcek 我的解决方案：

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

我使用了显示：身体元素上的弯曲并添加到标题位置：绝对;

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

添加高度并使用flex-direction：

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

JSFiddle demo： https://jsfiddle.net/435xvrm0/2/

相关内容

最新更新

热门标签：