美文网首页
元素居中的几种表现形式

元素居中的几种表现形式

作者: 缺月楼 | 来源:发表于2019-03-01 15:07 被阅读0次

    水平居中

    text-align:center;
    在其父元素上设置 text-align:center;属性 就可以是文字或者图片水平居中

    .content{
          text-align:center;
    }
    

    margin
    给元素设置宽度,利用margin:0 auto;属性进行居中设置;

    <style>
        .wrap{
          max-width:600px;
          margin:0 auto;
          background:pink;
        }
      </style>
    <div class="wrap">
      <p>你好</p>
      <h1>不样钓鱼</h1>
    </div>
    
    水平居中.png

    垂直居中

    文字不定宽高居中 利用元素属性 上下padding相等 text-align:center;即可实现 实例如下

    <style>
        .ct{
          padding:40px 0;
          background:#ccc;
          text-align:center;
        }
      </style>
    <div class="ct">
      <p>你好</p>
      <p>你好请继续加油</p>
    </div>
    

    效果图如下


    不定宽高.png

    绝对定位实现居中
    定宽定高 利用绝对定位 相对于自身实现居中 里面的文字内容 利用负margin
    实例如下

    <style>
        html,body{
          height:100%;
        }
        .dialog{
          position:absolute;
          top:50%;
          left:50%;
          margin-left:-150px;
          margin-top:-200px;
          width:400px;
          height:300px;
          box-shadow:0 0 0 3px #ccc;
        }
        .header{
          background:#000;
          color:#fff;
        }
        .header,.content{
           padding:10px;
        }
      </style>
    <div class="dialog">
      <div class="header">我是标题</div>
        <div class="content">我是内容</div>
    </div>
    

    效果图如下 :

    image.png

    还有一种形式是不定宽高
    利用css3的属性 transform:translate(-50%,-50%);相等对于自身,也可以达到同样的 效果 范例如下:

    <style>
        html,body{
          height:100%;
        }
        .dialog{
          position:absolute;
          top:50%;
          left:50%;
          /* margin-left:-150px;
          margin-top:-200px;
          width:400px;
          height:300px; */
          transform:translate(-50%,-50%);
          box-shadow:0 0 0 3px #ccc;
        }
        .header{
          background:#000;
          color:#fff;
        }
        .header,.content{
           padding:10px;
        }
      </style>
    <div class="dialog">
      <div class="header">我是标题dfdfdfddd</div>
      <div>我是标题dfdfdfddd</div>
      <div>我是标题dfdfdfddd</div>
        <div class="content">我是内容</div>
    </div>
    

    效果图如下 :


    css3属性实现居中.png

    vertical-align实现居中
    原理 利用伪元素 为参照基线 实现垂直对齐 很巧妙

    • 使行内元素盒模型与其行内元素容器垂直对齐。例如,用于垂直对齐一行文本的内的图片<img>
    <style>
    .box{
      width:300px;
      height:200px;
      border:1px solid pink;
      text-align:center;/*水平居中*/
      vertical-align:middle;
    }
    /*参照物为基线 实现对齐*/
    /* .text{
      height:200px;
      background:red;
      width:3px;
      display:inline-block;
      vertical-align:middle;
    } */
    .box:before{
      content:'';
      height:100%;
      display:inline-block;
      vertical-align:middle;
    }
    .box img{
      vertical-align:middle;
      background:pink;
    }
    </style>
    <div class="box">
      <!-- <span class="text"></span> -->
      <img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
    </div>
    
    利用基线为参照物.png

    table-cell实现居中
    这个居中方式和上面的差不多 利用display:table-cell属性 相当巧妙 使代码相当简洁

    <style>
        .box{
          width:300px;
          height:200px;
          border:1px solid pink;
          display:table-cell;
          vertical-align:middle;
          text-align:center;
        }
      </style>
    <div class="box">
      <img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
    </div>
    

    效果图如下

    相当简洁.png

    display: flex
    弹性布局 实现居中

    <style>
    .space{
      width: 100vw;
      height: 100vh;  /* 设置宽高以显示居中效果 */
      display: flex;  /* 弹性布局 */
      align-items: center;  /* 垂直居中 */
      justify-content: center;  /* 水平居中 */
      
    }
    body {
      margin: 0;
      background: rgba(0, 0, 0, .23);
    }
    .earth::after {
      content: '🌏';
      font-size: 185px;
    }
    </style>
    <div class="space">
      <div class="earth"></div>
    </div>
    

    效果图 如下 :


    弹性布局居中.png

    相关文章

      网友评论

          本文标题:元素居中的几种表现形式

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