css基础 CSS 布局 – Overflow、Float 浮动、CSS 布局 – 水平垂直居中对齐

末蓝、 2023-10-06 22:32 148阅读 0赞

#### 阅读目录 ####

*  CSS 布局 – Overflow
 *   *  overflow: visible
     *  overflow: hidden
     *  overflow: scroll
     *  overflow: auto
     *  verflow-x 和 overflow-y
     *  所有 CSS Overflow 属性
 *  CSS Float 浮动
 *   *  float 属性
     *  元素怎样浮动
     *  彼此相邻的浮动元素
     *  清除浮动 – 使用 clear
     *   *  什么是浮动布局
         *  浮动布局优点
         *  浮动布局缺点
         *  清除浮动的方式
 *  CSS 布局 – 水平 垂直居中对齐
 *   *  文本居中对齐
     *  图片居中对齐
     *  左右对齐 – 使用定位方式
     *  左右对齐 – 使用 float 方式
     *  垂直居中对齐 – 使用 padding
     *  垂直居中 – 使用 line-height
     *  垂直居中 – 使用 position 和 transform
     *  CSS七种垂直居中方法
     *   *  设定行高(line-height)
         *  vertical-align
         *  calc 动态计算
         *  使用表格或假装表格
         *  transform 是 CSS3 的新属性，主要用于元素的变形、旋转和位移
         *  绝对定位
         *  使用 Flexbox

## CSS 布局 – Overflow ##

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值：

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>visible</td> 
   <td>默认值。内容不会被修剪，会呈现在元素框之外。</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>内容会被修剪，并且其余内容是不可见的。</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</td> 
  </tr> 
  <tr> 
   <td>auto</td> 
   <td>如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>规定应该从父元素继承 overflow 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

注意：overflow 属性只工作于指定高度的块元素上。

注意：在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。

### overflow: visible ###

默认情况下，溢出是可见的(visible)，这意味着它不会被裁剪，而是在元素框外渲染：

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_11_color_FFFFFF_t_70_g_se_x_16]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
          
                background-color: #eee;
                width: 220px;
                height: 50px;
                border: 1px dotted black;
                overflow: visible;
            }
        </style>
    </head>
    <body>
    
        <div id="overflowTest">
            <p>这里的文本内容会溢出元素框。</p>
            <p>这里的文本内容会溢出元素框。</p>
            <p>这里的文本内容会溢出元素框。</p>
        </div>
    
    </body>
    </html>

### overflow: hidden ###

如果使用 hidden 值，溢出会被裁剪，其余内容被隐藏：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_11_color_FFFFFF_t_70_g_se_x_16 1]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
          
                background-color: #eee;
                width: 220px;
                height: 50px;
                border: 1px dotted black;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
    
        <div id="overflowTest">
            <p>这里的文本内容会溢出元素框。</p>
            <p>这里的文本内容会溢出元素框。</p>
            <p>这里的文本内容会溢出元素框。</p>
        </div>
    
    </body>
    </html>

### overflow: scroll ###

如果将值设置为 scroll，溢出将被裁剪，并添加滚动条以便在框内滚动。请注意，这将在水平和垂直方向上添加一个滚动条（即使您不需要它）：

![在这里插入图片描述][4adba98654dc4d1894f5ecfe3958583b.gif_pic_center]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
          
                background-color: #eee;
                width: 220px;
                height: 150px;
                border: 1px dotted black;
                overflow: scroll;
            }
        </style>
    </head>
    <body>
    
        <div id="overflowTest">
            <p>这里的文本内容会溢出元素框。</p>
            <p>这里的文本内容会溢出元素框。</p>
            <p>这里的文本内容会溢出元素框。</p>
        </div>
    
    </body>
    </html>

### overflow: auto ###

auto 值类似于 scroll，但是它仅在必要时添加滚动条：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_10_color_FFFFFF_t_70_g_se_x_16]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
          
                overflow: auto;
            }
        </style>
    </head>
    <body>
    
        <div id="overflowTest">
            <p>这里的文本内容会溢出元素框。</p>
            <p>这里的文本内容会溢出元素框。</p>
            <p>这里的文本内容会溢出元素框。</p>
        </div>
    
    </body>
    </html>

### verflow-x 和 overflow-y ###

overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：

overflow-x 指定如何处理内容的左/右边缘。  
overflow-y 指定如何处理内容的上/下边缘。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
          
                overflow-x: hidden; /* 隐藏水平滚动栏 */
                overflow-y: scroll; /* 添加垂直滚动栏 */
            }
        </style>
    </head>
    <body>
    
        <div id="overflowTest">
            <p>这里的文本内容会溢出元素框。</p>
            <p>这里的文本内容会溢出元素框。</p>
            <p>这里的文本内容会溢出元素框。</p>
        </div>
    
    </body>
    </html>

### 所有 CSS Overflow 属性 ###

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>overflow</td> 
   <td>规定如果内容溢出元素框会发生什么情况。</td> 
  </tr> 
  <tr> 
   <td>overflow-x</td> 
   <td>规定在元素的内容区域溢出时如何处理内容的左/右边缘。</td> 
  </tr> 
  <tr> 
   <td>overflow-y</td> 
   <td>指定在元素的内容区域溢出时如何处理内容的上/下边缘。</td> 
  </tr> 
 </tbody> 
</table>

## CSS Float 浮动 ##

CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。

什么是 CSS Float（浮动）？  
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

### float 属性 ###

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

left – 元素浮动到其容器的左侧
      right – 元素浮动在其容器的右侧
       none – 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
    inherit – 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

### 元素怎样浮动 ###

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            img {
          
                float: right;
            }
        </style>
    </head>
    <body>
    
        <p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
        <p>
        <img src="3.jpg" width="95" height="84" />
        这是一些文本。这是一些文本。这是一些文本。
        ...
        </p>
    
    </body>
    </html>

### 彼此相邻的浮动元素 ###

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 1]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .thumbnail {
          
                float: left;
                width: 110px;
                height: 90px;
                margin: 5px;
            }
        </style>
    </head>
    <body>
    
        <h3>图片库</h3>
        <p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
        <img class="thumbnail" src="3.jpg" width="107" height="90">
        ...
    
    </body>
    </html>

### 清除浮动 – 使用 clear ###

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

#### 什么是浮动布局 ####

当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。

#### 浮动布局优点 ####

这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。

另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与`inline-block` 还是有一些区别的，第一个就是关于横向排序的时候，float 可以设置方向而 `inline-block` 方向是固定的；

还有一个就是 `inline-block` 在使用时有时会有空白间隙的问题。

#### 浮动布局缺点 ####

最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

#### 清除浮动的方式 ####

1、添加额外标签

<div class="parent">
        //添加额外标签并且添加clear属性
        <div style="clear:both"></div>
        //也可以加一个br标签
    </div>

2、父级添加 overflow 属性，或者设置高度

<div class="parent" style="overflow:hidden">//auto 也可以
        //将父元素的overflow设置为hidden
        <div class="f"></div>
    </div>

3、建立伪类选择器清除浮动（推荐）

//在css中添加:after伪元素
    .parent:after{
        
        /* 设置添加子元素的内容是空 */
          content: '';  
          /* 设置添加子元素为块级元素 */
          display: block;
          /* 设置添加的子元素的高度0 */
          height: 0;
          /* 设置添加子元素看不见 */
          visibility: hidden;
          /* 设置clear：both */
          clear: both;
    }
    <div class="parent">
        <div class="f"></div>
    </div>

## CSS 布局 – 水平 垂直居中对齐 ##

要水平居中对齐一个元素(如 `<div>` ), 可以使用 `margin: auto;`。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 2]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .center {
          
                margin: auto;
                width: 60%;
                border: 3px solid #73AD21;
                padding: 10px;
            }
        </style>
    </head>
    <body>
    
        <div class="center">
            <p>div 元素是居中的</p>
        </div>
    
    </body>
    </html>

注意：如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

### 文本居中对齐 ###

如果仅仅是为了文本在元素内居中对齐，可以使用 `text-align: center;：`  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 3]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .center {
          
                text-align: center;
                border: 3px solid green;
            }
        </style>
    </head>
    <body>
    
        <h2>文本居中对齐</h2>
        <div class="center">
            <p>文本居中对齐。</p>
        </div>
    
    </body>
    </html>

### 图片居中对齐 ###

要让图片居中对齐, 可以使用 `margin: auto;` 并将它放到块元素中:  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 4]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            img {
          
                display: block;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
    
        <img src="3.jpg" alt="Paris" style="width:40%">
    
    </body>
    </html>

### 左右对齐 – 使用定位方式 ###

我们可以使用 `position: absolute;` 属性来对齐元素:  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 5]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .right {
          
                position: absolute;
                right: 0px;
                width: 300px;
                border: 3px solid #73AD21;
                padding: 10px;
            }
        </style>
    </head>
    <body>
    
        <div class="right">
            <p>人活得是心情，生活是一种态度~</p>
        </div>
    
    </body>
    </html>

注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

提示: 当使用 position 来对齐元素时, 通常 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。

当使用 position 属性时，IE8 以及更早的版本存在一个问题。  
如果容器元素（在我们的案例中是 `<div class=”container”>` ）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。

这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明：

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 6]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body {
          
                margin: 0;
                padding: 0;
            }
            .container {
          
                position: relative;
                width: 100%;
            }
            .right {
          
                position: absolute;
                right: 0px;
                width: 300px;
                background-color: #b0e0e6;
            }
        </style>
    </head>
    <body>
    
    <div class="container">
        <div class="right">
            <p><b>注意: </b>当使用浮动属性对齐，总是包括 !DOCTYPE 声明!如果丢失，它将会在 IE 浏览器产生奇怪的结果。</p>
        </div>
    </div>
    
    </body>
    </html>

### 左右对齐 – 使用 float 方式 ###

我们也可以使用 float 属性来对齐元素。

以下实例演示了使用 float 属性来实现右对齐:

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 7]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
           .right {
          
                float: right;
                width: 300px;
                border: 3px solid #73AD21;
                padding: 10px;
            }
        </style>
    </head>
    <body>
    
    <div class="right">
        <p>一个十一二岁的少年，项带银圈，手摸一柄钢叉，向一匹猹尽力地刺去。</p>
    </div>
    
    </body>
    </html>

当像这样对齐元素时，对 `<body>` 元素的外边距和内边距进行预定义是一个好主意。  
这样可以避免在不同的浏览器中出现可见的差异。

注意：  
如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 `“clearfix(清除浮动)”` 来解决该问题。

我们可以在父元素上添加 `overflow: auto;` 来解决子元素溢出的问题:

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_15_color_FFFFFF_t_70_g_se_x_16]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
          
                border: 3px solid #4CAF50;
                padding: 5px;
            }
            .img1 {
          
                float: right;
            }
            .clearfix {
          
                overflow: auto;
            }
            .img2 {
          
                float: right;
            }
        </style>
    </head>
    <body>
    
    <p>以下实例图在父元素中溢出，很不美观:</p>
    
    <div>
        <img class="img1" src="3.jpg" alt="Pineapple" width="170" height="170">
        wgchen - 前端博客，记录前端开发的个人技术博客！！！
    </div>
    
    <p style="clear:right">在父元素上通过添加 clearfix 类，并设置 overflow: auto; 来解决该问题:</p>
    
    <div class="clearfix">
        <img class="img2" src="3.jpg" alt="Pineapple" width="170" height="170">
            wgchen - 前端博客，记录前端开发的个人技术博客！！！
    </div>
    
    </body>
    </html>

当使用 float 属性时，IE8 以及更早的版本存在一个问题。  
如果省略 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。

当使用 float 属性时，请始终设置 !DOCTYPE 声明：

### 垂直居中对齐 – 使用 padding ###

CSS 中有很多方式可以实现垂直居中对齐。  
一个简单的方式就是头部顶部使用 padding：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16 1]

.center {
        
        padding: 70px 0;
        border: 3px solid green;
    }

果要水平和垂直都居中，可以使用 padding 和 `text-align: center:`  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16 2]

.center {
        
        padding: 70px 0;
        border: 3px solid green;
        text-align: center;
    }

### 垂直居中 – 使用 line-height ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16 3]

.center {
        
        line-height: 200px;
        height: 200px;
        border: 3px solid green;
        text-align: center;
    }
     
    /* 如果文本有多行，添加以下代码: */
    .center p {
        
        line-height: 1.5;
        display: inline-block;
        vertical-align: middle;
    }

### 垂直居中 – 使用 position 和 transform ###

除了使用 padding 和 line-height 属性外，我们还可以使用 transform 属性来设置垂直居中。

以下实例中，我们使用了 position 和 transform 属性来设置水平和垂直居中：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16 4]

.center {
         
        height: 200px;
        position: relative;
        border: 3px solid green; 
    }
     
    .center p {
        
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

### CSS七种垂直居中方法 ###

#### 设定行高(line-height) ####

设定行高是垂直居中最简单的方式，  
适用于「单行」的「行内元素」`( inline、inline-block )`。

例如单行的标题，或是已经设为 `inline-block` 属性的 `div`。

若将 `line-height` 设成和高度一样的数值，则内容的行内元素就会被垂直置中。因为是行高，所以会在行内元素的上下都加上行高的1/2，所以就垂直置中了！

不过由此就可以看出，为什么必须要单行的行内元素，因为如果多行，第二行与第一行的间距会变超大，就不是我们所期望的效果了。

CSS范例：外层 `div0`，内容 `redbox`，让 `redbox` 水平垂直置中。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_15_color_FFFFFF_t_70_g_se_x_16 1]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .div0{
          
                width:200px;
                height:150px;
                border:1px solid #000;
                line-height:150px;
                text-align:center;
            }
            .redbox{
          
                display:inline-block;
                width:30px;
                height:30px;
                background:#c00;
            }
        </style>
    </head>
    <body>
    
    <div class="div0">
        <div class="redbox"></div>
    </div>
    
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 8]

#### vertical-align ####

刚刚第一种方法，虽然是最简单的方法(适用于单行标题)。

不过就是只能单行，所以我们如果要让多行的元素也可以垂直居中，就须要使用伪元素的方式。

在此之前，先解释一下CSS里头 `vertical-align` 这个属性，这个属性虽然是垂直置中，不过却是指在元素内的所有元素垂直位置互相置中，并不是相对于外框的高度垂直居中。  
(下面的CSS会造成这种样子的垂直居中)  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 9]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .div0{
          
                width:200px;
                height:150px;
                border:1px solid #000;
                text-align:center;
            }
            .redbox{
          
                width:30px;
                height:30px;
                background:#c00;
                display:inline-block;
                vertical-align:middle;
            }
            .greenbox{
          
                width:30px;
                height:60px;
                background:#0c0;
                display:inline-block;
                vertical-align:middle;
            }
            .bluebox{
          
                width:30px;
                height:40px;
                background:#00f;
                display:inline-block;
                vertical-align:middle;
            }
        </style>
    </head>
    <body>
    
    <div class="div0">
        <div class="redbox"></div>
        <div class="greenbox"></div>
        <div class="bluebox"></div>
    </div>
    
    </body>
    </html>

因此，如果有一个方块变成了高度 100%，那么其他的方块就会真正的垂直居中。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 10]

.greenbox{
        
        width:30px;
        height:100%;
        background:#0c0;
        display:inline-block;
        vertical-align:middle;
    }

#### calc 动态计算 ####

看到这边或许会有疑问，如果今天我的 div 必须是 block，我该怎么让它垂直居中呢？

这时候就必须用到CSS特有的 calc 动态计算的能力，我们只要让要居中的 div 的 top 属性，与上方的距离是「50%的外框高度+ 50%的div高度」，就可以做到垂直居中。

至于为什么不用 margin-top，因为 margin 抓到的是水平高度，必须要用 top 才会正确。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 11]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .div0{
          
                width:200px;
                height:150px;
                border:1px solid #000;
            }
            .redbox{
          
                position:relative;
                width:30px;
                height:30px;
                background:#c00;
                float:left;
                top:calc(50% - 15px);
                margin-left:calc(50% - 45px);
            }
            .greenbox{
          
                position:relative;
                width:30px;
                height:80px;
                background:#0c0;
                float:left;
                top:calc(50% - 40px);
            }
            .bluebox{
          
                position:relative;
                width:30px;
                height:40px;
                background:#00f;
                float:left;
                top:calc(50% - 20px);
            }
        </style>
    </head>
    <body>
    
    <div class="div0">
        <div class="redbox"></div>
        <div class="greenbox"></div>
        <div class="bluebox"></div>
    </div>
    
    </body>
    </html>

#### 使用表格或假装表格 ####

或许有些人会发现，在表格这个HTML里，要实现垂直置中是相当容易的，只需要下一行`vertical-align:middle` 就可以，为什么呢？

最主要的原因就在于 table 的 display 是 table，而 td 的 display 是 table-cell，所以我们除了直接使用表格之外，也可以将要垂直置中元素的父元素的 display 改为t able-cell，就可以轻松实现，

不过修改 display 有时候也会造成其他样式属性的连动影响，需要小心使用。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 12]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .like-table {
          
                display: table-cell;
            }
    
            td,
            .like-table {
          
                width: 150px;
                height: 100px;
                border: 1px solid #000;
                vertical-align: middle;
            }
    
            td div,
            .like-table div {
          
                width: 100px;
                height: 50px;
                margin: 0 auto;
                color: #fff;
                font-size: 12px;
                line-height: 50px;
                text-align: center;
                background: #c00;
            }
    
            .like-table div {
          
                background: #069;
            }
        </style>
    </head>
    <body>
    
        <table>
            <tr>
                <td>
                    <div>表格垂直居中</div>
                </td>
            </tr>
        </table>
        <div class="like-table">
            <div>假的表格垂直居中</div>
        </div>
    
    </body>
    </html>

#### transform 是 CSS3 的新属性，主要用于元素的变形、旋转和位移 ####

transform是CSS3的新属性，主要用于元素的变形、旋转和位移，利用 transform 里头的translateY (改变垂直的位移，如果使用百分比为单位，则是以元素本身的长宽为基准)，搭配元素本身的 top 属性，就可以做出垂直居中的效果，需要注意的地方是，子元素必须要加上 `position:relative`，不然就会没有效果喔。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16 5]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>文字竖直方向居中显示</title>
        <style>
            .use-transform{
          
                width:200px;
                height:200px;
                border:1px solid #000;
            }
            .use-transform div{
          
                position: relative;
                width:100px;
                height:50px;
                top:50%;
                left: 25%;
                transform:translateY(-50%);
                background:#095;
            }
        </style>
    </head>
    <body>
    
        <div class="use-transform">
            <div>文字竖直方向居中显示</div>
        </div>
    
    </body>
    </html>

#### 绝对定位 ####

绝对定位就是CSS里头的 `position:absolute`，利用绝对位置来指定。

但垂直置中的做法又和我们正统的绝对位置不太相同，是要将上下左右的数值都设为 0，再搭配一个 `margin:auto`，就可以办到垂直置中。

不过要特别注意的是，设定绝对定位的子元素，其父元素的 position 必须要指定为 relative喔！而且绝对定位的元素是会互相覆盖的，所以如果内容元素较多，可能就会有些问题。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16 6]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>文字竖直方向居中显示</title>
        <style>
            .use-absolute{
          
                position: relative;
                width:200px;
                height:150px;
                border:1px solid #000;
            }
            .use-absolute div{
          
                position: absolute;
                width:100px;
                height:50px;
                top:0;
                right:0;
                bottom:0;
                left:0;
                margin:auto;
                background:#f60;
            }
        </style>
    </head>
    <body>
    
        <div class="use-absolute">
            <div>文字竖直方向居中显示</div>
        </div>
    
    </body>
    </html>

#### 使用 Flexbox ####

Flexbox 可谓是我们在移动端用的最多的布局方法，因为大部分现代手机浏览器都支持这个方法了。Flexbox，使用 `align-items` 或 `align-content` 的属性，轻轻松松就可以做到垂直居中的效果喔！

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16 7]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>文字竖直方向居中显示</title>
        <style>
            .use-flexbox{
          
                display:flex;
                align-items:center;
                justify-content:center;
                width:200px;
                height:150px;
                border:1px solid #000;
            }
            .use-flexbox div{
          
                width:100px;
                height:50px;
                background:#099;
            }
        </style>
    </head>
    <body>
    
        <div class="use-flexbox">
            <div>文字竖直方向居中显示</div>
        </div>
    
    </body>
    </html>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_11_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/aba03ef7cb5646ef8ccd93bbb20600db.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_11,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_11_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/0cb6993eb74b4b2f98e7d521be9087a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_11,color_FFFFFF,t_70,g_se,x_16
[4adba98654dc4d1894f5ecfe3958583b.gif_pic_center]: https://img-blog.csdnimg.cn/4adba98654dc4d1894f5ecfe3958583b.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_10_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/a33635e9eed64148b4c35b3da4348843.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_10,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/5bc6c1e7c6434042a3c61d926923c178.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/cda7d65900a545f598cbee8caa52f98e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/b305fec7f9784cb5b2c274aeb577e50a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/b5494e4d390d4b0cb4285efdcb04289c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/85e16911ff50453f9e287b7a8bf0fd71.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/05710d63f733466dba839a787e7be7f4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/88d077f95744401f8f365c1549a60b94.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/2b7a369fb24b46e6beaa467fce7e96c3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/a4f3b91a90194922abdeefd5b5f4f2ca.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b88587f8fbac405c9f700151dfd5009c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/9a2963ca01fb4c63b85ed4e987cf37e0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/35163a89dbd249fbaf1f94bfc43c786d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/34621ebbb9bf4a7ab39adfcc967159c0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/c9ff40bc75d64b2b9ce63ce5d25a668c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_15_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/e94bc7b68fda4841a447c760ad28dcbd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/6c80d7146ec6460e820635a9c8d14f20.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/784363d152e247edb7c8e1cd969ec94e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/5031f669f4f649cc89bacd8b23738fe2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/f8a1ddfd01d647ce97d9e1cb70d5d6e2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_13_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/61767f598f4a4b5cb7ead28a7788bbf5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/35ca2001d15c4be38d22d1db61a5f608.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/4a4c77a62b3d4aa9b1da24eff13ead95.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/9c4763468a3848c1949b3151980a74c6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_20,color_FFFFFF,t_70,g_se,x_16