javascript中,如何让button按钮处于页面最中，而不是页面上部居中，求代码，谢谢

JavaScript021

javascript中,如何让button按钮处于页面最中，而不是页面上部居中，求代码，谢谢,第1张

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="UTF-8">

    <title>按钮绝对居中</title>

    <style>

      .button {

        position: fixed

        left: 50%

        top: 50%

        transform: translate(-50%, -50%)

      }

    </style>

  </head>

  <body>

      <button class="button">居中的按钮</button>

  </body>

</html>

1、准备好一个空的html结构的文档。

2、接下来要准备的是准备一个div用来放内容了，这里为了显示特意给div设置了边框。

3、接下来就在div中添加内容，如下图所示，运行后会发现内容偏向于左上角。

4、给div设置水平居中，如下图所示，并且设置行高为div的高度，会发现它水平垂直居中了。

5、让其display属性为table-cell，知道table单元格中可以通过vertical-align垂直居中，转化后也可以用此属性。

6、运用display转化后会发现margin的auto属性不起作用了。