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; }
    ——学习记录
  • 相关阅读:
    mysql 安装失败 start service执行不下去
    C# 打开钱箱支持北洋、佳博、爱普生
    CF1093E Intersection of Permutations [分块 +bitset]
    CF895C Square Subsets [线性基]
    线性基学习笔记
    长链剖分学习笔记
    GSS 系列题解
    P3206 [HNOI2010]城市建设 [线段树分治+LCT维护动态MST]
    线段树分治学习笔记
    [CF662C Binary Table][状压+FWT]
  • 原文地址:https://www.cnblogs.com/atao24/p/13278126.html
Copyright © 2011-2022 走看看