Question

我环顾网络，无法找到解决方案。所以我自己会问这个问题。

我如何将文本置于HTML中心？我并不是指＆＃34; text-align：center;＆＃34;我的意思是，完全集中。就像确保文本直接位于网页中间的一行一样。提前谢谢。

HTML：

<!DOCTYPE html>
<html lang="en">

  <head>

<title>CSGOCarry.com | Win Big!</title>
<link rel="stylesheet" type="text/css" href="csgositecss.css">

  </head>

  <body>

    <div class="container">
      <div class="center">
        <h1>Welcome to CSGOCarry</h1>
      </div>
    </div>

  </body>

</html>

CSS：

body {
  background-image: url("csgocarryback.jpg");
  background-size: 100%;
}

h1 {
  color:white; 
  text-align:center; 
  font-size:50px
}
.container {
}
.center {
}

注意：我尝试将文本置于中心块的中心位置。但是我很难这样做。

Answer 1

试试这个

.container {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}

＆＃13;

body {
  background-image: url("csgocarryback.jpg");
  background-size: 100%;
  background-color: #AAA;
}
h1 {
  color: white;
  text-align: center;
  font-size: 50px;
}
.container {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>

  <title>CSGOCarry.com | Win Big!</title>
  <link rel="stylesheet" type="text/css" href="csgositecss.css">

</head>

<body>

  <div class="container">
    <div class="center">
      <h1>Welcome to CSGOCarry</h1>
    </div>
  </div>

</body>

</html>

＆＃13;

Answer 2

一种解决方案是在父元素上使用flex，如下所示：

.container {
    display: flex;
    justify-content: center; /* Horizontally */
    align-items: center; /* Vertically */
}

.center {
    text-align: center;
}

这会使.container中的任何内容垂直和水平居中。

Answer 3

一种解决方案是在<center>之后立即放置<body>，并在结束正文之前立即结束。像这样： HTML：

    <!DOCTYPE html>
<html lang="en">

  <head>

<title>CSGOCarry.com | Win Big!</title>
<link rel="stylesheet" type="text/css" href="csgositecss.css">

  </head>

  <body>
<center>
    <div class="container">
      <div class="center">
        <h1>Welcome to CSGOCarry</h1>
      </div>
    </div>
</center>
  </body>

</html>

CSS：

  body {
  background-image: url("csgocarryback.jpg");
  background-size: 100%;
}

h1 {
  color:white; 
  text-align:center; 
  font-size:50px
}
.container {
}
.center {
}

我也为你创建了一个jsfiddle：https://jsfiddle.net/8uafor26/

HTML中的文本 - 居中

3 个答案: