元素水平或垂直居中问题

一、元素的水平居中
⑴.行内元素的水平居中：text-align
⑵.块级元素的水平居中：margin：0 auto
二、元素的垂直居中
⑴.行内元素垂直居中：
    line-height设置为与父级元素的高度一样
⑵.、块级元素垂直居中：
1.可以给父级使用相对定位，子级使用绝对定位，将top、left、right、bottom为0    
    a.给父级相对定位，子级绝对定位：left：50%；top：50%；margin-left：-子级元素宽度一半；margin-top：-子级元素高度一半
    b.给父级相对定位，子级绝对定位 height:百分比x; x属于0~100%    margin：auto;

　eg:

                                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>垂直居中</title>
                    <style type="text/css">
                        /*IE版本低于7时不能正常使用*/
                        .outer{
                            height: 200px;
                            position: relative;
                            background: #bfe;
                        }
                        .outer .inner{
                            position: absolute;
                            top: 0;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            width: 50%;
                            height: 30%;
                            margin: auto;
                            background: coral;
                        }

                    </style>
                </head>
                <body>
                    <div class="outer">
                        <div class="inner">inner content</div>
                    </div>
                </body>
                </html>
View Code

    c.给父级和子级都加绝对定位，再给子级添加top：calc（50% - 子级元素高度一半）、left：calc（50% - 子级元素宽度一半）
            
    d.给父级一个display：flex； align-items：center；再给子级添加：margin：0 auto;(使用弹性布局垂直轴居中)
        
⑶.样式表格方式：【CSS Table Method】(父元素与子元素等高等宽；父元素背景颜色无效；二者为行内块级元素)
    eg:

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>垂直居中</title>
                <style type="text/css">
                    .outer{
                        height: 200px;
                        display: table;
                        /*background: #bfe;  该背景会被子元素覆盖不会显示出来*/
                    }
                    .outer .inner{
                        display: table-cell;
                        vertical-align:middle;
                        background: coral;
                        
                        /*若为版本较低的ie6使用下面样式*/
                        display: inline-block;
                    }
                </style>
            </head>
            <body>
                <div class="outer">
                    <div class="inner">inner content</div>
                </div>
            </body>
            </html>
View Code

          
⑷.图片在div中垂直居中：
    eg:   

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>垂直居中</title>
  <style type="text/css">
      .outer{
        height: 200px;
        display: table-cell;
        vertical-align: middle;
        background: #bfe;
      }
      .outer .inner{
        background: coral;
      }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner">inner content</div>
  </div>
</body>
</html>
View Code

 

⑸.借用兄弟元素float-div来设置：
    eg:

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Floater Div</title>
            <style type="text/css">
                .outer{
                    height: 200px;
                    background: #bfe;
                }
                .floater{
                    float: left;
                    height: 50%;
                    width: 100%;
                    margin-bottom: -50px;
                    /*background: teal;*/
                }
                .inner{
                    clear: both;
                    height: 100px;
                    background: coral;
                }
            </style>
        </head>
        <body>
            <div class="outer">
                <div class="floater"></div>
                <div class="inner"></div>
            </div>
        </body>
        </html>
View Code

 

posted @ 2019-07-03 19:54  nzc  阅读(212)  评论(0)  编辑  收藏  举报