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>
    

      

  • 相关阅读:
    [LeetCode] Wiggle Sort
    [LeetCode] Perfect Squares
    [LeetCode] Minimum Window Substring
    [LeetCode] Valid Sudoku
    [LeetCode] Sudoku Solver
    [LeetCode] First Bad Version
    [LeetCode] Find the Celebrity
    [LeetCode] Paint Fence
    [LeetCode] H-Index II
    [LeetCode] H-Index
  • 原文地址:https://www.cnblogs.com/alantao/p/8670851.html
Copyright © 2011-2022 走看看