zoukankan      html  css  js  c++  java
  • CSS居中

    一、文本居中

    1、横向居中

    text-aline:center;

    2、单行文本垂直居中

    line-height:height;

    3、多行文本垂直居中

    盒子不设置高度,同时设置上下相同的padding;

    .box{
        width:400px;
        font-size:20px;
        line-height:40px;
        padding:20px 0px;
    }

    二、块级元素居中:

    1、横向居中
    ①已转块或块级:

    margin:0 auto;

    ②绝对定位(宽度定值)

    .box{
      position:relative;
    }
    .box .son{
      width:400px;
      position:absolute;
      left:50%;
      margin-left:-200px;      
    }

    ③空间移动(宽度不定)

    .box{
      position:relative;
    }
    .box .son{
      width:400px;
      position:absolute;
      left:50%;
      transform:translateX(-50%);/*空间移动,水平移动*/   
    }

    2、垂直居中

    ①不设置父盒子高度,同时设置上下相同的padding,前提是块级元素和父盒子宽度都固定

    .box {
      width: 400px;
      /*
      子盒子垂直居中
      父盒子高度省略
      设置相同的上下padding
      */
      padding: 100px 0;
      border: 1px solid #000;
    }
    .box .son {
        width: 200px;
        height: 50px;
        background-color: lightblue;
        margin: 0 auto;
    }

    ②绝对定位(高度固定)

    .box{
      position:relative;
    }
    .box .son{
      heighr:400px;
      position:absolute;
      top:50%;
      margin-top:-200px; 
    }

    ③空间移动(高度不定)

    .box{
      position:relative;
    }
    .box .son{
      height:400px;
      position:absolute;
      top:50%;
      transform:translateY(-50%);/*空间移动,垂直移动 */     
    }

    3、水平垂直居中

    ①宽高固定

    .box{
      position:relative;
    }
    .box .son{
      width:400px;
      height:400px;
      position:absolute;
      left:50%;
      top:50%;
      margin-top:-200px;
      margin-left:-200px;
    }

    ②宽高不固定

    .box{
      position:relative;
    }
    .box .son{
      position:absolute;
      left:50%;
      top:50%;
      transform:translateX(-50%);/*空间移动,水平移动 */
      transform:translateY(-50%); /*空间移动,垂直移动*/
    }
  • 相关阅读:
    图片懒加载DEMO
    手写offset函数
    DOM
    jQuery笔记
    children和 childNodes辨析
    运算符...典型的三种用处
    Python中的数据结构---栈,队列
    手写call方法
    移动零元素--leetcode题解总结
    剑指 Offer 36. 二叉搜索树与双向链表
  • 原文地址:https://www.cnblogs.com/zjp-/p/9005857.html
Copyright © 2011-2022 走看看