zoukankan      html  css  js  c++  java
  • 垂直居中的实现方式

    基本设置

      <div id="outer">
        <div id="inner">
          测试div
        </div>
      </div>
    

    绝对定位和负外边距对块级元素进行垂直居中

      #outer {
         200px;
        height: 300px;
        background: skyblue;
    
        position: relative;
      }
      #inner {
         150px;
        height: 50px;
        background: palevioletred;
    
        position: absolute;
        top: 50%;
        margin-top: -25px;
        line-height: 50px;
      }
    

    绝对定位和transform

      #outer {
         200px;
        height: 300px;
        background: skyblue;
    
        position: relative;
      }
      #inner {
         150px;
        height: 50px;
        background: palevioletred;
    
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
      }
    

    绝对定位结合margin: auto

      #outer {
         200px;
        height: 300px;
        background: skyblue;
    
        position: relative;
      }
      #inner {
         150px;
        height: 50px;
        background: palevioletred;
    
        position: absolute;
        /* top与bottom要有相同的值 */
        top: 0;
        bottom: 0;
        margin: auto;
      }
    

    父元素设置padding

      #outer {
         200px;
        background: skyblue;
    
        padding: 100px 0;
      }
      #inner {
         150px;
        height: 50px;
        background: palevioletred;
      }
    

    flex布局

      #outer {
         200px;
        height: 300px;
        background: skyblue;
    
        display: flex;
        /* 设定在垂直方向的对齐方式 */
        align-items: center;
      }
      #inner {
         150px;
        height: 50px;
        background: palevioletred;
      }
    
      #outer {
         200px;
        height: 300px;
        background: skyblue;
    
        display: flex;
        /* 默认的主轴为水平方向 */
        /* 更改默认主轴, 并修改主轴的对齐方式 */
        flex-direction: column;
        justify-content: center;
      }
      #inner {
         150px;
        height: 50px;
        background: palevioletred;
      }
    

    line-height和vertical-align图片垂直居中

      <div id="outer">
        <img src="./test.jpg" alt="">
      </div>
    
      #outer {
         200px;
        height: 300px;
        background: skyblue;
    
        line-height: 300px;
      }
      #outer img {
         100px;
        height: 150px;
    
        vertical-align: middle;
      }
    
  • 相关阅读:
    20169205 2016-2017-2 《移动平台应用开发实践》第4周学习总结
    20169205 2016-2017-2《网络攻防》第4周总结
    20169205 2016-2017-2 《移动平台应用开发实践》第3周学习总结
    tcpdump使用
    wireshark使用
    20169205 2016-2017-2《网络攻防》第3周总结
    OpenSSH/PuTTY/SSH使用
    Aircrack使用
    Metasploit使用
    20155325 2017-2018 1 《信息安全系统设计基础》 第十周学习总结
  • 原文地址:https://www.cnblogs.com/zhangrunhao/p/7715241.html
Copyright © 2011-2022 走看看