视频中的实现，可以使用“拔河效应”吗？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

   <head>
      <title>4-1-示例</title>
      <meta charset="UTF-8">
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <style type="text/css">
            *
            {
                margin: 0;
                padding: 0;
            }

            html,
            body
            {
                width: 100%;
                height: 100%;
            }

            .content
            {
                width: 1920px;
                height: 4040px;
                background: url("../images/mooc.png") center no-repeat;
            }

            .opacity
            {
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-image: url("../images/opacity.png");
            }

            .login
            {
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                width: 360px;
                height: 360px;
                background: url("../images/login.png") no-repeat;
            }
        </style>
   </head>

   <body>
      <div class="content"></div>
      <div class="opacity"></div>
      <div class="login"></div>
   </body>

</html>

使用“拔河效应'的适应性更好，不需要计算负margin值。

我学习太差被关起来了 2019-06-10

源自：CSS定位（position） 4-1 定位和边距的区别以及弹出层的简单实例