将<main>内容居中

时间：2017-08-08 21:02:52

标签： html css css3 flexbox centering

我想在页面上水平和垂直居中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>

3 个答案:

答案 0 :(得分：0)

要集中展示内容，您要查看的内容是将以下内容应用于body和.wrap_content（还可能还有.wrap_site）：

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

以下内容纯粹 body：

height: 100vh;

这导致以下结果：

＆＃13;
＆＃13; 
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)
})
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

另外，请注意您在示例中声明HTML的jQuery （除了在<body>中加载）。我认为这种加倍仅仅是因为包含了一个Stack Snippet，但请注意，jQuery应该从<head>部分加载，并且只包含一次。

希望这有帮助！ ：）

答案 1 :(得分：0)

Chcek我的解决方案：

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

我在body元素上使用了display：flex并添加到标题位置：absolute; 

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

答案 2 :(得分：0)

添加高度并使用flex-direction：

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

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

相关问题
最新问题