zoukankan      html  css  js  c++  java

  • CSS中盒子垂直居中的常用方法

    在前端开发过程中，盒子居中是常常用到的。其中 ，居中又可以分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的。下面我们一起来讨论一下实现垂直居中的方法。

    首先，定义一个需要垂直居中的div元素，他的宽度和高度均为300px，背景色为橙色。代码如下：

     
     
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>index</title>  
    6.     <style>  
    7.         .content {  
    8.              300px;  
    9.             height: 300px;  
    10.             background: orange;  
    11.         }  
    12.     </style>  
    13. </head>  
    14. <body>  
    15.     <div class="content"></div>  
    16. </body>  
    17. </html>  

    我们需要使得这个橙色的div居中，到底该怎么办呢？首先我们实现水平居中，上面已经提到过了，可以通过设置margin: 0 auto实现水平居中，代码如下：
     <!DOCTYPE html>  
    1. <html lang="en">  
    2. <head>  
    3.     <meta charset="UTF-8">  
    4.     <title>index</title>  
    5.     <style>  
    6.         .content {  
    7.              300px;  
    8.             height: 300px;  
    9.             background: orange;  
    10.             margin: 0 auto;  
    11.         }  
    12.     </style>  
    13. </head>  
    14. <body>  
    15.     <div class="content"></div>  
    16. </body>  
    17. </html>  

    效果如下：

    很好，已经实现水平居中了！接下来该打大boss了——实现垂直居中。不过，在这之前，我们先要设置div元素的祖先元素html和body的高度为100%（因为他们默认是为0的），并且清除默认样式，即把margin和padding设置为0（如果不清除默认样式的话，浏览器就会出现滚动条，聪明的亲，自己想想问什么）。

     
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>index</title>  
    6.     <style>  
    7.         html, body {  
    8.              100%;  
    9.             height: 100%;  
    10.             margin: 0;   
    11.             padding: 0;  
    12.         }  
    13.         .content {  
    14.              300px;  
    15.             height: 300px;  
    16.             background: orange;  
    17.             margin: 0 auto; /*水平居中*/  
    18.         }  
    19.     </style>  
    20. </head>  
    21. <body>  
    22.     <div class="content"></div>  
    23. </body>  
    24. </html>  

    接下来，需要做的事情就是要让div往下移动了。我们都知道top属性可以使得元素向下偏移的。但是，由于默认情况下，元素在文档流里是从上往下、从左到右紧密的布局的，我们不可以直接通过top属性改变它的垂直偏移。这就需要使用position属性，设置它的值为relative，就可以通过top、bottom、right、left等属性使它在正常的文档流中发生位置偏移（注意，此时它在并没有脱离文档流，原来的位置还会占据着的！）。对于position属性不熟悉的，可以自己去w3c看一下。设置了position: relative后的代码如下:
     
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>index</title>  
    6.     <style>  
    7.         html, body {  
    8.              100%;  
    9.             height: 100%;  
    10.             margin: 0;  
    11.             padding: 0;  
    12.         }  
    13.         .content {  
    14.              300px;  
    15.             height: 300px;  
    16.             background: orange;  
    17.             margin: 0 auto; /*水平居中*/  
    18.             position: relative; /*脱离文档流*/  
    19.         }  
    20.     </style>  
    21. </head>  
    22. <body>  
    23.     <div class="content"></div>  
    24. </body>  
    25. </html>  
    26.      

    我们刷新一下页面，发现跟之前是没有任何变化的，因为，我们仅仅是使div脱离了文档流，但是还没开始移动他的垂直偏移。好，下面我们就让它偏移吧！垂直偏移需要用到top属性，它的值可以是具体的像素，也可以是百分数。因为我们现在不知道父元素（即body）的具体高度，所以，是不可以通过具体像素来偏移的，而应该用百分数。既然是要让它居中嘛！好，那么我们就让它的值为50%不就行了吗？问题真的那么简单，我们来试一下，就设置50%试一下：

     
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>index</title>  
    6.     <style>  
    7.         html,body {  
    8.              100%;  
    9.             height: 100%;  
    10.             margin: 0;  
    11.             padding: 0;  
    12.         }  
    13.         .content {  
    14.              300px;  
    15.             height: 300px;  
    16.             background: orange;  
    17.             margin: 0 auto; /*水平居中*/  
    18.             position: relative; /*脱离文档流*/  
    19.             top: 50%; /*偏移*/  
    20.         }  
    21.     </style>  
    22. </head>  
    23. <body>  
    24.     <div class="content"></div>  
    25. </body>  
    26. </html>  


    效果如下图所示：

    div垂直方向上面并没有居中。明显是偏下了。下面，我们在浏览器中间画一条红线用来参考，如下图：


    通过观察上图，只要让div的中心移动到红线的位置，那么整个div就居中了。那怎么让它中心移动到红线处呢？从图中可以观察到，从div的中心到红线的距离是div自身高度的一半。这时候，我们可以使用通过margin-top属性来设置，因为div的自身高度是300，所以，需要设置他的margin-top值为-150。为什么是要设置成负数的呢？因为正数是向下偏移，我们是希望div向上偏移，所以应该是负数，如下：
     
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>index</title>  
    6.     <style>  
    7.         html,body {  
    8.              100%;  
    9.             height: 100%;  
    10.             margin: 0;  
    11.             padding: 0;  
    12.         }  
    13.         .content {  
    14.              300px;  
    15.             height: 300px;  
    16.             background: orange;  
    17.             margin: 0 auto; /*水平居中*/  
    18.             position: relative; /*脱离文档流*/  
    19.             top: 50%; /*偏移*/  
    20.             margin-top: -150px;   
    21.         }  
    22.     </style>  
    23. </head>  
    24. <body>  
    25.     <div class="content"></div>  
    26. </body>  
    27. </html>  

    确实已经居中了。好兴奋！有木有？！

        

    除了可以使用margin-top把div往上偏移之外，CSS3的transform属性也可以实现这个功能，通过设置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。如下：
     
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>index</title>  
    6.     <style>  
    7.         html,body {  
    8.              100%;  
    9.             height: 100%;  
    10.             margin: 0;  
    11.             padding: 0;  
    12.         }  
    13.         .content {  
    14.              300px;  
    15.             height: 300px;  
    16.             background: orange;  
    17.             margin: 0 auto; /*水平居中*/  
    18.             position: relative; /*脱离文档流*/  
    19.             top: 50%; /*偏移*/  
    20.             transform: translateY(-50%);  
    21.         }  
    22.     </style>  
    23. </head>  
    24. <body>  
    25.     <div class="content"></div>  
    26. </body>  
    27. </html>  

    效果如下：


    上面的两种方法，我们都是基于设置div的top值为50%之后，再进行调整垂偏移量来实现居中的。如果使用CSS3的弹性布局（flex）的话，问题就会变得容易多了。使用CSS3的弹性布局很简单，只要设置父元素（这里是指body）的display的值为flex即可。

     
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>index</title>  
    6.     <style>  
    7.         html,body {  
    8.              100%;  
    9.             height: 100%;  
    10.             margin: 0;  
    11.             padding: 0;  
    12.         }  
    13.    
    14.         body {  
    15.             display: flex;  
    16.             align-items: center; /*定义body的元素垂直居中*/  
    17.             justify-content: center; /*定义body的里的元素水平居中*/  
    18.         }  
    19.         .content {  
    20.              300px;  
    21.             height: 300px;  
    22.             background: orange;          
    23.         }  
    24.     </style>  
    25. </head>  
    26. <body>  
    27.     <div class="content"></div>  
    28. </body>  
    29. </html>  

    效果：
  • 相关阅读:
    套题 8.22
    套题 8.21
    P1042 乒乓球
    套题8.20
    #52. 【UR #4】元旦激光炮 （交互式题）
    #82. 【UR #7】水题生成器
    度度熊与邪恶大魔王
    wpf 获取image控件的图片并保存
    wpf 让正执行的程序暂停几秒钟
    wpf问题集锦
  • 原文地址：https://www.cnblogs.com/dwj88/p/7593657.html
Copyright © 2011-2022 走看看