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;
      }
    
  • 相关阅读:
    表单的编辑添加和删除 .removeClass() .append() .preAll() .attr('b') document.createElement()
    菜单与内容下拉jQuery
    s2选择框的全选和反选jQuery
    作用域
    当前触发事件的两种方式(onclick) 和 ('id') 获取
    词义分析
    Qt下载地址
    字符集(编码)转换_Qt532_QString
    字符集(编码)转换_Windows
    字符集(编码)转换_Linux
  • 原文地址:https://www.cnblogs.com/zhangrunhao/p/7715241.html
Copyright © 2011-2022 走看看