HTML+CSS入门 CSS未知宽高的盒子div居中的多种方法-职坐标

HTML+CSS入门 CSS未知宽高的盒子div居中的多种方法

沉沙 2018-10-09 来源：阅读 1355 评论 0

摘要：本篇教程介绍了HTML+CSS入门 CSS未知宽高的盒子div居中的多种方法，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门 CSS未知宽高的盒子div居中的多种方法，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

不知道盒子大小、宽高时，如何让盒子上下左右居中？

　　应用场景：比如上传图片时，并不知道图片的大小，但要求图片显示在某盒子的正中央。
方法1：让4周的拉力均匀-常用


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    #box1{
      width: 100px;
      height: 100px;
      background: #ccc;
      position:relative;
    }
    #box2{
      width: 20px;
      height: 20px;
      background: #f00;
      position:absolute;
      top:0; /* 四周拉力相同 */
      right:0; /* 四周拉力相同 */
      bottom:0; /* 四周拉力相同 */
      left:0; /* 四周拉力相同 */
      margin:auto; /* 再设置 marign 自动 */
    }

  </style>
</head>
<body>
  <div id="box1">
    <div id="box2"></div>
  </div>
</body>
</html>

方法2：c3的属性，移动自己大小的一半


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    #box1{
      width: 100px;
      height: 100px;
      background: #ccc;
      position:relative;
    }
    #box2{
      width: 20px;
      height: 20px;
      background: #f00;
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
    }

  </style>
</head>
<body>
  <div id="box1">
    <div id="box2"></div>
  </div>
</body>
</html>

知道自身高度的情况下，使用负边距，-margin自身高度的一半


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    #box1{
      width: 100px;
      height: 100px;
      background: #ccc;
      position:relative;
    }
    #box2{
      width: 20px;
      height: 20px;
      background: #f00;
      position:absolute;
      left:50%;
      top:50%;
      margin-left:-10px; /* 知道自己大小的情况，自身高度的一半 */
      margin-top:-10px; /* 知道自己大小的情况，自身高度的一半 */
    }

  </style>
</head>
<body>
  <div id="box1">
    <div id="box2"></div>
  </div>
</body>
</html>