zoukankan      html  css  js  c++  java
  • CSS水平垂直居中方式

    1.grid布局实现(一)

      .father{ 

      display:grid;

      align-item:center;

      justify-items:center; }

    2.grid布局实现(二)

      .father{ 

      display:grid;

      align-item:center;

      justify-content:center; }

    3.grid配合margin实现

      .father{ display:grid; }

      .son{ margin:auto; }

    4.flex布局实现

      .father{

      display:flex;

      justify-content:center;

      align-items:center; }

    5.flex配合margin实现

      .father{ display:flex; }

      .son{ margin:auto; }

    6.使用display:table-cell实现

      .father{ 

      display:table-cell;

      vertical-align:middle;

      text-align:center; }

      .son{ display:inline-block; }

    7.使用绝对定位实现

      .father{ position:relative; }

      .son{ 

      position:absolute;

      left:50%;

      top:50%;

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

    8.通过内联元素的特性实现

      .father{ text-align:center; }

      .father::after{ 

      content:'';

      line-height:200px; }

      .son{ display:inline-block; }

      line-height与father元素height一样

    ————学习记录

  • 相关阅读:
    Upgrading to MySQL 5.7---focusing on temporal types
    mysqldump备份7
    mysqldump原理5
    mysqldump原理4
    mysqldump原理3
    mysqldump原理2
    mysqldump原理1
    MySQL复制中slave延迟监控
    赵浮云的blog 关注IT运维,开源硬件。
    爱维帮---LVS
  • 原文地址:https://www.cnblogs.com/atao24/p/13278476.html
Copyright © 2011-2022 走看看