怎么在css3网页中心添加文字？

怎么再下面这个纯CSS3旋转的星球动画效果网页中心位置添加两行文字？

无标题文档

题主要的效果如下，如果容器高度或者宽度不够或者过大，题主可以自己调整下样式，具体看代码中注释


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <title>纯CSS实现多彩旋转星球星系环绕特效动画</title>
    <link rel="stylesheet" type="text/css" href="https://jsdaima.hu-cheng.net/js/2020/10/4024/css/www.jsdaima.com.css">
    <style>
        .word {
            position: absolute;
            font-size: 20px;
            color: #f00;
            background: rgba(255,255,255,.5);
            text-align: center;
            z-index: 99;
            /*下面4个样式控制垂直居中和文字行高，高度变化后，margin-top改为 -高度的一半px*/
            line-height: 50px;
            height: 100px;
            top: 50%;
            margin-top: -50px;
            /*下面3个样式控制水平居中，宽度变化后，margin-left改为 -宽度的一半px*/
            width: 300px;
            left: 50%;
            margin-left: -150px;
        }
    </style>
</head>
<body>
    <div class="word">
        题主你要放的2行文字<br />
        放到这个容器里面
    </div>
    <div class="wrapper">
        <div class="sphere">
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
            <div class="section"></div>
        </div>
    </div>


</body>
</html>

旋转的星球动画效果网页没有看到啊
网页中心位置添加两行文字参考

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
html,  body {
    height: 100%;
}
.text {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 999;
    margin-left: -50px;
    margin-top: -25px;
    width: 100px;
    height: 50px;
    border: 1px solid #999;

}
</style>
</head>
<body>
    <div class="text">
        网页中心位置<br>
        添加两行文字
    </div>
</body>
</html>

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box-center {
      position: absolute;
      /* 不排除你的定位已经设置了层级 */
      z-index: 999;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <body>
    <div class="box-center">
      <p>123</p>
      <p>456</p>
    </div>
  </body>
</html>

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632