美文网首页前端
文字上下左右居中

文字上下左右居中

作者: aokaywe | 来源:发表于2018-06-18 14:17 被阅读0次

    基本方法:

    .center {
      text-align: center;       #水平居中,对block元素生效
      margin: auto;              //垂直居中, 对block元素生效
      vertical-align: middle; //垂直居中,对inline-level 和 'table-cell' 元素生效
    }
    

    方法一: 用table cell

    /* CSS file */
    
    .main {
        display: table;
    }
    
    .inner {
        border: 1px solid #000000;
        display: table-cell;
        vertical-align: middle;
    }
    
    /* HTML File */
    <div class="main">
        <div class="inner"> This </div>
    </div>
    

    方法二: 用flexbox

    <!-- HTML -->
    <div class="wrapper">
       <div>Hi</div>
    </div>
    
    /* CSS */
    .wrapper {
      display : flex;
      align-items : center;
    }
    

    相关文章

      网友评论

        本文标题:文字上下左右居中

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