zoukankan      html  css  js  c++  java
  • CSS8种垂直居中方式

    1.通过vertical-align:middle实现垂直居中

      .son{

        display:inline-block;

        vertical-align:middle;

      }

    2.通过display:flex实现垂直居中

      .father{ display:flex; }

      .son{ align-self:center; }

    3.通过伪元素“:before”实现垂直居中

      .father{

                 500px;
                height:500px;
                "> blue;
                display: block;
            }
            .father:before{
                content: '';
                display:inline-block;
                vertical-align:middle;
                height: 100%;
            }
            .son{
                 200px;
                height: 200px;
                "> black;
                display:inline-block;
                vertical-align:middle;
      }
    4.通过dispaly:table-cell实现CSS垂直居中
      .father{ display:table; }
      .son{ 
      display:table-cell;
      vertical-align:middle; }
    5.通过隐藏节点实现CSS垂直居中
      .hide{ 
      50%;
      height:25%; }
      .son{ 
      50%;
      height:50%; }
    6.已知父元素高度通过transform实现CSS垂直居中
      .son{ 
      position:relative;
      top:50%;
      transform:translateY(-50%); }
    7.未知父元素高度通过transform实现CSS垂直居中
      .father{ 
      position:relative; }
      .son{ position:absolute;
      top:50%;
      transform:translateY(-50%); }
    8.通过line-height实现CSS垂直居中
      该方法适用于子元素为单行文本的情况
      .father{ height:300px; }
      .son{ line-height:300px; }
    ——学习记录
  • 相关阅读:
    QSerialPort类
    初识Json
    Qt plugins(插件)目录
    Qt连接sql server数据库遇到的问题
    串口通信中,QString 、QByteArray 转化需要注意的问题
    Qt : 隐式数据共享(copy on write)
    Ascii码 、16进制与 char
    Caffe框架详细梳理
    时间管理
    Atom实用配置插件for C++
  • 原文地址:https://www.cnblogs.com/atao24/p/13278126.html
Copyright © 2011-2022 走看看