Question

我在尝试使用CSS居中一个body元素时遇到了问题。我希望它在页面上水平和垂直居中。问题在于它现在是如何编写的，它会将文本置于短消息的中心（即三个字以下），但是更长的消息会使其混乱。

这是我的CSS :(它是Sinatra的erb文件，但我认为这不会影响CSS的解释方式）

body {
  background: white;

  /*TODO: still not perfect; changes based on length of message */
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}
.message {
  color: #2f4f4f;
  font-family: 'Roboto', sans-serif;
  font-size: 36;
  text-align: center;
}
.form {
  text-align: center;
}
input[type=number]{
  width: 100%;
  border: none;
  border-bottom: 6px solid #2f4f4f;
  background: transparent;
  text-align: center;
  color: #2f4f4f;
  font-size: 25px;
  font-family: 'Roboto';
}
input[type=number]:focus {
  outline: none;
}
#btn{
  display: none;
}

Answer 1

body {
    /* ... */
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

请确保删除保证金。

Answer 2

尝试在页面上使用'flexbox'

.container {
	display: flex;
	height: 500px;
	align-items: center;
	justify-content: center;
}

<div class="container">
	<div class="content">
		Content
	</div>
</div>

Answer 3

您可以使用display: flex

html, body {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

Demo

Answer 4

<强> HTML

<div class="test">
   <div class="content">
    <p class="para">test test test</p>
   </div>
</div>

<强> CSS

.test { }
.para {
   width: 100%;
   text-align: center;
   padding-top: 10px;
   padding-bottom: 10px;
}

在CSS中使用不同的文本大小居中HTML主体元素

4 个答案: