css水平垂直居中

2019-04-11 09:53:37来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

1.CSS的水平居中,

  1.1 父元素是块状元素,子元素为行内元素的居中,直接设置text-aglin: center ,常见的文本,span 标签,button,img等行内元素都是可以使其水平居中的

    

.box{
            text-align: center;
        }

<div class="box">
        <span>11111</span>
        <button>123</button>
    </div>

  1.2 父元素为块状元素,子元素也为块状元素

    1.2.1 子元素宽度已知,则可以设置子元素 margin 0 auto,就可以使子元素相对于父元素水平居中

<style>
        .box{
            background-color: pink;
        }
        .con-box{
            width: 300px;
            margin: 0 auto;
            height: 30px;
            background-color: aqua;
        }
    </style>

<div class="box">
        <div class="con-box">

        </div>
    </div>

  1.3  父元素为块状元素,子元素为块状元素宽度不定,直接设置子元素display:inline,  然后设置 父元素的text-aglin:center

<style>
        .box{
            background-color: pink;
            text-align: center
        }
        .con-box{
            display: inline;
        }
    </style>
<div class="box">
        <div class="con-box">
            111111
        </div>
    </div>

 

    注: 使用弹性布局,使用定位,都是可以使子元素相对于父元素水平居中的

2.垂直居中

  2.1 父元素为块状元素,子元素为行内元素,如单行文本,直接设置父元素的line-height 等于父元素的高度,

<style>
        .box{
            background-color: pink;
            height: 50px;
            line-height: 50px;
        }
        .con span{
            line-height: 50px;
        }
    </style>

<div class="box">
        <span> 111111</span>
    </div>

  2.2 父元素为块状元素,子元素为多行文本,则设置父元素的line-height 等于父元素高度除于行数,

.box{
            background-color: pink;
            height: 50px;
            line-height: 25px;
        }
        .con span{
            line-height: 50px;
        }

<div class="box">
        <span> 111111</span><br>
        <span> 111111</span><br>
    </div>

  2.3 父元素为块状元素,子元素也为块状元素,

    2.3.1 子元素高度未知,改变父元素的display 属性 设置为 table-cell,然后设置vertical-align:middle;

<style>
        .box{
            background-color: pink;
            height: 50px;
            display: table-cell;
            vertical-align:middle;
        }
        .box .con-box{
            background-color: aqua;
        }
    </style>

<div class="box">
        <div class="con-box"> 
            1111
        </div>
    </div>

    2.3.2 子元素高度已知,则设置margin-top,元素高度减去子元素高度除于2; 记住一定要设置父元素的overflow: hidden; 

      (相邻块状元素 margin会共享,取最大值,不设置overflow: hidden,子元素的margin-top:10px 会跑到父元素上)

<style>
        .box{
            background-color: pink;
            height: 50px;
            overflow: hidden;           
     }
        .box .con-box{
            margin-top: 10px;
            height: 30px;
            line-height: 30px;
            background-color: aqua;
        }
    </style>

<div class="box">
        <div class="con-box"> 
            1111
        </div>
    </div>

    2.3.3 子元素为图片,直接可以设置父元素display: table-cell; vertical-align: middle;

<style>
        .box{
            background-color: pink;
            height: 450px;
            display: table-cell; 
            vertical-align: middle;         
     }
</style>

  2.3.4 子元素为多个,比如图片,外加别的行内元素,使用2.3.3,文本可以不用改变,必读给图片加 vertical-align: middle;

    <style>
        .box{
            background-color: pink;
            height: 450px;
            display: table-cell; 
            vertical-align: middle;         
     }
     img{
         vertical-align: middle
     }
    </style>

<div class="box">
        <img src="../xunguang-4.jpg" alt="">
        <span>12123123</span>
        1111111
    </div>

3.CSS 水平垂直居中 上面两两组和使可以实现的,我们主要看一下定位和flex 实现水平垂直居中

  3.1子元素高度未知,高度已知的块状元素水平垂直居中,(宽度未知,块状元素肯定使占满整行的,就不存在水平居中了)

    3.1.1使用定位配置,配合margin 0 auto ,top 50%,宽度未知,只能使用transform:translateY(-50%);

  <style>
        .box{
            background-color: pink;
            height: 450px;  
            position: relative; // relative 默认沾满整行,absolute话,未设置宽度则由子元素撑开    
            overflow: hidden; 
        }
        .box .con-box{
            position: relative;
            width: 300px;
            margin: 0 auto;
            background-color: aqua;
            top:50%;
            transform: translateY(-50%);
        }

    </style>
<div class="box">
        <div class="con-box">
            123123123123
            <br>
            1222222222
        </div>
    </div>

    3.1.2,使用定位,子元素 left 0 right 0 top 0 bottom 0 margin auto (一定要注意父子元素的定位属性)

<style>
        .box{
            background-color: pink;
            height: 450px;  
            position: relative; /* 父元素一定为relative */   
            overflow: hidden; 
        }
        .box .con-box{
            position: absolute; /*  *子元素一定 为absolete*/
            width: 300px;
            background-color: aqua;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
<div class="box">
        <div class="con-box">
            123123123123
            <br>
            1222222222
        </div>
    </div>

  3.2 ,子元素宽度,高度都已知,3.1 上的两种方法都适用宽度高度已经的子元素水平垂直居中

    3.2.1 margin-top: -width/2 具体的值, transform: translateY(-50%) 这个有兼容性问题,需要ie9以上,具体宽度值则无兼容性问题,

<style>
                .box{
            background-color: pink;
            height: 450px;  
            position: relative; 
            overflow: hidden; 
        }
        .box .con-box{
            position: relative;
            width: 300px;
            height: 400px;
            margin: 0 auto;
            background-color: aqua;
            top:50%;
            margin-top: -200px
        }


    </style>

<div class="box">
        <div class="con-box">
            123123123123
            <br>
            1222222222
        </div>
    </div>

    上面方法的变化版

<style>
                .box{
            background-color: pink;
            height: 450px;  
            position: relative; 
            overflow: hidden; 
        }
        .box .con-box{
            position: relative;
            width: 300px;
            height: 400px;
            background-color: aqua;
            top:50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -150px;
        }


    </style>

<div class="box">
        <div class="con-box">
            123123123123
            <br>
            1222222222
        </div>
    </div>

4 flex 水平垂直居中

  flex 主轴上居中,交叉轴上居中,flex 有很大的兼容性问题,一般用于移动端,很简单

<style>
                .box{
            background-color: pink;
            height: 450px;  
            display: flex;
            justify-content: center;
            align-items: center
        }
        .box .con-box{
            width: 300px;
            height: 400px;
            background-color: aqua;
        }


    </style>
<div class="box">
        <div class="con-box">
            123123123123
            <br>
            1222222222
        </div>
    </div>

     多个子元素也一样实现

    子元素可以单独设置对其方式

<style>
                .box{
            background-color: pink;
            height: 450px;  
            display: flex;
            justify-content: center;
            align-items: center
        }
        .box .con-box{
            width: 200px;
            height: 400px;
            background-color: aqua;
        }
        .box .con-box2{
            width: 200px;
            height: 400px;
            background-color: lightcyan;
        }
        .box .con-box3{
            width: 200px;
            height: 400px;
            background-color: gold;
            align-self: flex-end;
        }

    </style>
<div class="box">
        <div class="con-box">
            123123123123
            <br>
            1222222222
        </div>
        <div class="con-box2">
            123123123123
            <br>
            1222222222
        </div>
        <div class="con-box3">
            123123123123
            <br>
            1222222222
        </div>
    </div>

   总结 

   1.水平居中,能使用margin: 0 auto ,这最简单的,不能的话就把子元素转化成inline,然后使用text-aglin:center,无兼容性问题。

    上面达不到需求,可以考虑使用定位,移动端能使用flex 就使用flex

     2. 垂直居中,单行文本,使用line-height 等于父元素高度,如果不行,就可以设置父元素display:table-cell,vertical-align: middle;

    能解决一大部分问题,如果还不行就考虑定位配合margin-top:-width/2,使用margin。移动端能使用flex 就使用flex.

  如果您还有更好的方法,欢迎给我留言,共同学习,共同进步。up


原文链接:https://www.cnblogs.com/czkolve/p/10686182.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:块级元素

下一篇:那些年使用过的清除浮动的方法