zoukankan      html  css  js  c++  java
  • 未知宽高元素怎么上下左右垂直居中

    1.position+transform

    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    2.flex

    display: flex;
    align-items: center;
    justify-content: center;
    

      

    3.table-cell

    <div class="pagination">
        <p>多行居中</p>
    </div>
    <style>
    .pagination {
      position: relative;
      200px;
      height:200px;
      border:1px solid red;
      display: table;
    }
    .pagination p{
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    </style>

      

    4.absolute+margin

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    

    如:

    <div class="pagination">
        <p>不等高度的居中不等高度的居中不等高度的居中不等高</p>
    </div>
    <style>
    html,body{100%;height:100}
    .pagination {
      200px;
      height:200px;
      border:1px solid red;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    .pagination p{
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    </style>
    

      

    5.浮动方案  absolute + relative 扩展性强,兼容性强;

    <div class="pagination">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
    <style>
    .pagination {
      position: relative;
    }
    .pagination ul {
      position: absolute;
      left: 50%;
    }
    .pagination li {
      float: left;
      position: relative;/*注意,这里不能是absolute*/
      right: 50%;
    }
    </style>
    

      

  • 相关阅读:
    基于Python的接口测试框架
    接口自动化之Postman+Newman
    UIAutomator定位Android控件的方法
    HTTP接口功能自动化测试入门
    前端基础:HTML标签(上)
    Python 面向对象进阶
    Python 断言和异常
    Linux 文件上传Linux服务器
    Python 运算符
    Python 基本数据类型
  • 原文地址:https://www.cnblogs.com/alantao/p/8670851.html
Copyright © 2011-2022 走看看