html----實現元素上下左右居中

本文轉載自查看原文 2019-02-19 15:43 1946 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html-如何讓背景寬高100%元素上下左右居中 CSS 控制元素上下左右居中 div在父元素內上下左右居中使一個div元素上下左右居中元素上下左右居中的幾種方法通過定位實現子元素相對於父元素上下左右居中 CSS實現上下左右垂直居中 css：子元素div 上下左右居中方法總結 flex 方法上下左右居中子元素無寬高 css：子元素div 上下左右居中方法總結