html----实现元素上下左右居中 

<body>
  <div id="box">
    <div class="con"></div>
  </div>
</body>

方法1：

<style>
    #box {
      width: 300px;
      height: 200px;
      background: lightpink;
      position: relative;
    }

    .con {
      width: 100px;
      height: 100px;
      background: blue;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  </style>

方法2：

<style>
    #box {
      width: 300px;
      height: 200px;
      background: lightpink;
      position: relative;
    }

    .con {
      width: 100px;
      height: 100px;
      background: blue;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>

方法3：

<style>
    #box {
      width: 300px;
      height: 200px;
      background: lightpink;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .con {
      width: 100px;
      height: 100px;
      background: blue;

    }
  </style>

 

posted @ 2019-02-19 15:43  SRH啦  阅读(4777)  评论(0)  编辑  收藏  举报