zoukankan      html  css  js  c++  java
  • 居中的各种方式

    居中是一个永恒的话题

    水平居中

    text-align

    <!-- log -->
    <style>
      #p1 {
        text-align: center;
        border: 1px solid black;
      }
      #c1 {
        border: 1px solid red;
      }
    </style>
    <div id="p1">
      <span id="c1">Content here</span>
    </div>
    

    margin 0 auto

    <!-- log -->
    <style>
      #p2 {
        border: 1px solid black;
        height: 100px;
      }
      #c2 {
        margin: 0 auto;
         50px;
        height: 50px;
        border: 1px solid red;
      }
    </style>
    <div id="p2">
      <div id="c2"></div>
    </div>
    

    定位

    <!-- log -->
    <style>
      #p3 {
        position: relative;
        border: 1px solid black;
        height: 100px;
      }
      #c3 {
        position: absolute;
        left: 50%;
        margin-left: -25px;
         50px;
        height: 50px;
        border: 1px solid red;
      }
    </style>
    <div id="p3">
      <div id="c3"></div>
    </div>
    

    flex

    <!-- log -->
    <style>
      #p4 {
        border: 1px solid black;
        height: 100px;
        display: flex;
        justify-content: center;
      }
      #c4 {
         50px;
        height: 50px;
        border: 1px solid red;
      }
    </style>
    <div id="p4">
      <div id="c4"></div>
    </div>
    

    浮动元素居中

    <!-- log -->
    <style>
      #p5 {
        border: 1px solid black;
        height: 100px;
         500px;
      }
      #c5 {
        float: left;
        position: relative;
        left: 50%;
    
        /* 需要已知子元素的宽度 */
        /* margin-left: -25px; */
    
        /* CSS3 */
        transform: translateX(-50%);
    
        border: 1px solid red;
        height: 50px;
         50px;
      }
    </style>
    <div id="p5">
      <div id="c5"></div>
    </div>
    

    垂直居中

    vertical-align

    关键点在于如何使参考的基线居中。

    利用兄弟节点。

    <!-- log -->
    <style>
      #parent1 {
        border: 1px solid black;
        height: 100px;
      }
      #child1 {
        display: inline-block;
        vertical-align: middle;
        border: 1px solid red;
         50px;
        height: 50px;
      }
      .help {
        display: inline-block;
        vertical-align: middle;
         0;
        height: 100%;
      }
    </style>
    <div id="parent1">
      <div id="child1"></div>
      <div class="help"></div>
    </div>
    

    利用 line-height

    <!-- log -->
    <style>
      #parent1_ {
        border: 1px solid black;
        line-height: 100px;
      }
      #child1_ {
        display: inline-block;
        vertical-align: middle;
        border: 1px solid red;
         50px;
        height: 50px;
      }
    </style>
    <div id="parent1_">
      <div id="child1_"></div>
    </div>
    

    line-height

    This method will work when you want to vertically center a single line of text. All we need to do is set a line-height on the element containing the text larger than its font-size.By default equal space will be given above and below the text and so the text will sit in the vertical center.Most tutorials will also set the height on the element with the same value given to the line-height. I don’t think setting the height is necessary, but if line-height alone doesn’t work for you, setting the height of the element will likely be the solution.

    <!-- log -->
    <style>
      #parent2 {
        border: 1px solid black;
      }
      #child2 {
        border: 1px solid red;
        line-height: 200px;
      }
    </style>
    <div id="parent2">
      <div id="child2">Text here</div>
    </div>
    

    绝对定位 + 负偏移修正

    This method works for block level elements and also works in all browsers. It does require that we set the height of the element we want to center

    <!-- log -->
    <style>
      #parent3 {
        height: 100px;
        position: relative;
        border: 1px solid black;
      }
      #child3 {
        display: inline-block;
        position: absolute;
        top: 50%;
        height: 50px;
        margin-top: -25px;
        border: 1px solid red;
      }
    </style>
    <div id="parent3">
      <div id="child3">Content here</div>
    </div>
    

    同样的,利用 CSS3的translateY

    <!-- log -->
    <style>
      #parent3_ {
        height: 100px;
        position: relative;
        border: 1px solid black;
      }
      #child3_ {
        display: inline-block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 50px;
        border: 1px solid red;
      }
    </style>
    <div id="parent3_">
      <div id="child3_">Content here</div>
    </div>
    

    注意 margin-top若用百分比,参照的是父元素宽度,至于为啥这么设计,我也不知道。

    <!-- log -->
    <style>
      #parent3__ {
        height: 100px;
         500px;
        position: relative;
        border: 1px solid black;
      }
      #child3__ {
        position: absolute;
        top: 50%;
        height: 50%; /* 50px */
        margin-top: -5%; /* 25px */
        border: 1px solid red;
      }
    </style>
    <div id="parent3__">
      <div id="child3__">Content here</div>
    </div>
    

    flex

    <!-- log -->
    <style>
      #parent4 {
        display: flex;
        align-items: center;
    
        height: 100px;
        border: 1px solid black;
      }
      #child4 {
        height: 30%;
         50%;
        border: 1px solid red;
      }
    </style>
    <div id="parent4">
      <div id="child4">Content here</div>
    </div>
    

    其他

    http://vanseodesign.com/css/vertical-centering/

  • 相关阅读:
    dgango
    django
    pymysql 增删改 查 索引
    mysql 单表,多表,符合条件,子查询
    mysql 数据的增删改
    mysql foreignkey
    mysql基础知识之数据类型与约束
    MySol序
    MySql
    Python Selenium 常用方法总结
  • 原文地址:https://www.cnblogs.com/oceans/p/13684765.html
Copyright © 2011-2022 走看看