美文网首页
垂直居中的方法

垂直居中的方法

作者: 饥人谷_小侯 | 来源:发表于2017-10-24 21:45 被阅读0次

    1.正常情况下的垂直居中

    • 适用情况:该父元素的宽度固定,高度随着内部元素增多而撑开,增加子元素内容撑开父元素的高度以后依然居中。
    • 方法:将上下padding设置为相等。
    • 举例:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <div class="ct">
        <p>你好你好你好</p>
        <p>你好你好你好</p>
      </div>
    </body>
    </html>
    
    .ct{
      padding: 45px 0;
      text-align: center;
      background: #eee;
    }
    

    以上面的方法可以设置两个段落在页面中垂直居中。

    2. 通过绝对定位来设置垂直居中

    • 适用情况:当该元素的宽度高度固定时设置的垂直居中。
    • 方法:设置元素定位方式为绝对定位,设置位置为向下百分之五十,向右百分之五十,然后再设置负外边距分别为宽度和高度的一半。
    • 举例:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <div class="dialog">
        <div class="header">我是标题</div>
        <div class="content">我是内容</div>
      </div>
    </body>
    </html>
    
    .dialog {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -200px;
      margin-top: -150px;
      width: 400px;
      height: 300px;
      box-shadow: 0px 0px 3px #000;
    }
    .dialog .header{
      padding: 10px;
      background: #000;
      color: #fff;
    }
    .dialog .content{
      padding: 10px;
    }
    

    3.通过绝对定位和translate来设置垂直居中

    • 设置情况:当该元素的宽高都不确定时,且要求该元素永远水平居中与浏览器界面时,CSS3属性要注意兼容性。
    • 方法:设置元素定位方式为绝对定位,设置位置为向下百分之五十,向右百分之五十,然后设置transform:translate(-50%, -50%);
    • 例子:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <div class="css">
        <p>你好你好你好</p>
      </div>
    </body>
    </html>
    
    p {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      background-color: yellow;
    }
    

    4.使用vertical-align实现居中

    • 使用场景:只能用于行内元素和表格中的元素居中。
    • 方法:在行内元素前设置一个与父元素等高的无内容inline-block元素,然后设置两者对齐方式都为中心线对齐。
    • 例子:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <div class="box">
        ![](https://img.haomeiwen.com/i8002989/151d3966d311e4ad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      </div>
    </body>
    </html>
    
    .box{
      width: 300px;
      height: 200px;
      border: 1px solid ;
      text-align: center;
    }
    .box:before{
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    .box img{
      vertical-align: middle;
      background: blue;
    }
    

    5.通过table-cell实现居中

    • 使用场景:改变父元素的display不会产生影响的时候。
    • 方法:设置父元素的display:table-cell;vertical-align: middle;
    • 例子:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <div class="box">
        ![](https://img.haomeiwen.com/i8002989/151d3966d311e4ad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      </div>
    </body>
    </html>
    
    .box{
      width: 300px;
      height: 200px;
      border: 1px solid ;
      text-align: center;
    }
    .box:before{
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    .box img{
      vertical-align: middle;
      background: blue;
    }
    

    6.直接通过table标签来设置绝对居中

    方法:

    <table>
        <tr>
            <td>
                <div></div>
            </td>
        </tr>
    </table>
    

    上面例子中的div默认就是绝对居中的

    7.通过flex布局来设置绝对居中

    使用场景:可以兼容CSS3的情况下。
    方法:使用flex布局,在父元素中添加如下代码:

    display:flex;
    justify-content: center;
    align-items: center;
    

    相关文章

      网友评论

          本文标题:垂直居中的方法

          本文链接:https://www.haomeiwen.com/subject/qsbxpxtx.html