zoukankan      html  css  js  c++  java
  • 元素水平垂直居中的方式有哪些

    元素水平垂直居中的方式有哪些?

    • absolute加margin方案

    • fixed 加 margin 方案

    • display:table 方案

    • 行内元素line-height方案

    • flex 弹性布局方案

    • transform 未知元素宽高解决方案

    • 
      
      absolute加margin方案
      
      
          div{
              position: absolute;
               100px;
              height: 100px;
              left: 50%;
              top: 50%:
              margin-top: -50px;
              margin-left: -50px;
          }
      
      
      fixed 加 margin 方案
      
      
          div{
              position: fixed;
               100px;
              height: 100px;
              top: 0;
              right:0;
              left: 0;
              bottom: 0;
              margin: auto;
          }
      
      
      display:table 方案
      
      
          div{
              display: table-cell;
              vertical-align: middle;
              text-align: center;
               100px;
              height: 100px;
          }
      
      
      行内元素line-height方案
      
      
          div{
              text-align: center;
              line-height: 100px;
          }
      
      
      flex 弹性布局方案
      
      
          div{
              display: flex;
              align-items: center;
              justify-content:center
          }
      
      
      transform 未知元素宽高解决方案
      
      
          div{
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%)
          }
       
  • 相关阅读:
    P2009 跑步
    P3916 图的遍历
    P2865 [USACO06NOV]路障Roadblocks
    P2820 局域网
    P2176 [USACO14FEB]路障Roadblock
    讨伐!数论
    网络流入门——EK算法
    最被低估的特质
    我的天哪我有博客了!
    Area POJ
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/12056932.html
Copyright © 2011-2022 走看看