css垂直居中

2021-07-12 08:07

阅读:403

标签:ott   code   position   mic   nsf   style   play   inline   splay   

垂直居中常用方法总结:

一、div 在 div中居中

  1. 绝对居中   

    position: absolute; left: 0; top: 0; right: 0; bottom: 0;

      margin: auto;

  2. 绝对定位

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

  或

    margin:  -width;

  3. 内边距

二、span 在 div中居中

  1. 单行文本

    1) line-height == height

    2) button 特性 

  2. 多行文本

    1) 外层嵌套div, 使div垂直居中

    2) 伪元素before/after

      content: "";

      height: 100%;

      display:  inline-block;

      vertical-align: middle;

三、img在div中居中

  1. 伪元素before/after

    content: "";

    height: 100%;

    display:  inline-block;

    vertical-align: middle;

  2. table

    display: table-cell;

    vertical-align: middle;

  3. background-position

 

css垂直居中

标签:ott   code   position   mic   nsf   style   play   inline   splay   

原文地址:http://www.cnblogs.com/peiling-home/p/7082817.html


评论


亲,登录后才可以留言!