css未知宽高的盒子div居中的多种方法：方法2最实用

绝地灬酷狼 2022-04-18 00:54 285阅读 0赞

原文链接：[http://www.cnblogs.com/daysme/p/6366089.html][http_www.cnblogs.com_daysme_p_6366089.html]

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

应用场景：比如上传图片时，并不知道图片的大小，但要求图片显示在某盒子的正中央。

### 方法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>

[回目录][Link 1]

### 知道自身高度的情况下，使用负边距，-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>

2017-03-18

看到这篇文章有这么多方法，保存一下。

原：http://www.cnblogs.com/hutuzhu/p/4450850.html

--------------------

垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。

**方法1：table-cell**

html结构：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>&lt;div&nbsp;</code><code>class</code><code>=</code><code>"box box1"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;span&gt;垂直居中&lt;/span&gt;</code></p> <p><code>&lt;/div&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

css：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> 
   <td> <p><code>.box1{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>display: table-cell;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>vertical-align: middle;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>text-align: center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![231525037347615.png][]

**方法2：display:flex**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> 
   <td> <p><code>.box2{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>display: flex;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>justify-content:center;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>align-items:Center;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**方法3：绝对定位和负边距**

.box3{position:relative;}
    .box3 span{
                position: absolute;
                width:100px;
                height: 50px;
                top:50%;
                left:50%;
                margin-left:-50px;
                margin-top:-25px;
                text-align: center;
            }

**方法4：绝对定位和0**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> </td> 
   <td> <p><code>.box4 span{ </code></p> <p><code>&nbsp;&nbsp;</code><code>width: 50%;&nbsp;</code></p> <p><code>&nbsp;&nbsp;</code><code>height: 50%;&nbsp;</code></p> <p><code>&nbsp;&nbsp;</code><code>background:</code>&nbsp;<code>#000;</code></p> <p><code>&nbsp;&nbsp;</code><code>overflow: auto;&nbsp;</code></p> <p><code>&nbsp;&nbsp;</code><code>margin: auto;&nbsp;</code></p> <p><code>&nbsp;&nbsp;</code><code>position: absolute;&nbsp;</code></p> <p><code>&nbsp;&nbsp;</code><code>top: 0; left: 0; bottom: 0; right: 0;&nbsp;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这种方法跟上面的有些类似，但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中，很神奇吧。不过这里得确定内部元素的高度，可以用百分比，比较适合移动端。

**方法5：translate**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> </td> 
   <td> <p><code>.box6 span{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>position: absolute;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>top:50%;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>left:50%;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width:100%;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>transform:translate(-50%,-50%);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>text-align: center;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这实际上是方法3的变形，移位是通过translate来实现的。

**方法6：display:inline-block**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> </td> 
   <td> <p><code>.box7{ </code></p> <p><code>&nbsp;&nbsp;</code><code>text-align:center;</code></p> <p><code>&nbsp;&nbsp;</code><code>font-size:0;</code></p> <p><code>}</code></p> <p><code>.box7 span{ </code></p> <p><code>&nbsp;&nbsp;</code><code>vertical-align:middle;</code></p> <p><code>&nbsp;&nbsp;</code><code>display:inline-block;</code></p> <p><code>&nbsp;&nbsp;</code><code>font-size:16px;</code></p> <p><code>}</code></p> <p><code>.box7:after{ </code></p> <p><code>&nbsp;&nbsp;</code><code>content:</code><code>''</code><code>;</code></p> <p><code>&nbsp;&nbsp;</code><code>width:0;</code></p> <p><code>&nbsp;&nbsp;</code><code>height:100%;</code></p> <p><code>&nbsp;&nbsp;</code><code>display:inline-block;</code></p> <p><code>&nbsp;&nbsp;</code><code>vertical-align:middle;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这种方法确实巧妙...通过:after来占位。

**方法7：display:flex和margin:auto**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> 
   <td> <p><code>.box8{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>display: flex;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>text-align: center;</code></p> <p><code>}</code></p> <p><code>.box8 span{margin: auto;}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**方法8：display:-webkit-box**

.box9{
        display: -webkit-box;
        -webkit-box-pack:center;
        -webkit-box-align:center;
        -webkit-box-orient: vertical;
        text-align: center
    }

css3博大精深，可以实现很多创造性的效果，需要好好研究下。

今天又发现一种方法，现在补上：

**方法9：display:-webkit-box**

这种方法，在 content 元素外插入一个 div。设置此 div `height:50%; margin-bottom:-contentheight;`。

content 清除浮动，并显示在中间。

<div class="floater"></div>  
    <div class="content"> Content here </div>

.floater {
        float:left; 
        height:50%; 
        margin-bottom:-120px;
    }
    .content {
        clear:both; 
        height:240px; 
        position:relative;
    }

[http_www.cnblogs.com_daysme_p_6366089.html]: http://www.cnblogs.com/daysme/p/6366089.html
[Link 1]: http://www.cnblogs.com/daysme/p/6366089.html#_labelTop
[231525037347615.png]: /images/20220418/f1c994e27dbc415098bad4c34b9c3b81.png