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%); /*空间移动,垂直移动*/
    }
  • 相关阅读:

    【工作】---前后端联调
    【react】---Immutable的基本使用
    【react】传值
    【原生】 HTML DOM 事件,各种事件类型、事件种类
    两台笔记本电脑之间实现屏幕扩展
    【看图学习后台管理系统】
    【bug】在react开发中,使用link 跳转中,无法点击跳转的问题
    【前端工程师】 web 安全问题
    【前端工程师】 性能和效率 优化的问题
  • 原文地址:https://www.cnblogs.com/zjp-/p/9005857.html
Copyright © 2011-2022 走看看