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/

  • 相关阅读:
    Dropplets – 极简的 Markdown 博客平台
    T3
    Awesomplete
    SVG Drawing Animation
    Dom Animator – 提供 Dom 注释动画的 JS 库
    Electron
    很赞的效果!互动的页面元素拖放着色实验
    BookBlock
    雷军投资的理财网站,年化收益13%!
    Rainyday.js – 使用 JavaScript 实现雨滴效果
  • 原文地址:https://www.cnblogs.com/oceans/p/13684765.html
Copyright © 2011-2022 走看看