Question

由于某种原因，我在使文本居中出现问题。我需要将文本准确地定位在网站（计算机和网站）的中心。

.bg { 
    background: url(https://i.imgur.com/HrC81SX.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    -webkit-filter: blur(5px);
    filter: blur(5px);
  }

#cs {
    display: block;
    text-align: center;
    font-family: 'Times New Roman';
    position: absolute;
    color: #EFE4D9;
}

#text {
    text-align: left;
}

<div class="bg"></div>
<h1 id="cs" style="text-align: center;">C O M I N G&nbsp;&nbsp;&nbsp;S O O N</h1>
<p id="text">such's movie room is on it's way through the development, just stay tuned! C:<br>- such <3</p>

Answer 1

.bg { 
    background: url(https://i.imgur.com/HrC81SX.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    z-index:0;
  }

#cs {
    display: block;
    text-align: center;
    font-family: 'Times New Roman';
    position: relative;
    color: #EFE4D9;  
}

#text {
  position: relative;
}

Answer 2

尝试一下：

.bg { 
    background: url(https://i.imgur.com/HrC81SX.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    z-index:0;
  }

#cs {
    display: block;
    text-align: center;
    font-family: 'Times New Roman';
    position: relative;
    color: #EFE4D9;  
}

#text {
  position: relative;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="bg"></div>
        <h1 id="cs" style="text-align: center;">C O M I N G&nbsp;&nbsp;&nbsp;S O O N</h1>
        <p id="text">such's movie room is on it's way through the development, just stay tuned! C:<br>- such <3</p>
        <!--a countdown should be here-->
    </body>
</html>

如何水平居中对齐文本（h2）？我有问题

2 个答案: