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%); /*空间移动,垂直移动*/
    }
  • 相关阅读:
    poj 3666 Making the Grade
    poj 3186 Treats for the Cows (区间dp)
    hdu 1074 Doing Homework(状压)
    CodeForces 489C Given Length and Sum of Digits...
    CodeForces 163A Substring and Subsequence
    CodeForces 366C Dima and Salad
    CodeForces 180C Letter
    CodeForces
    hdu 2859 Phalanx
    socket接收大数据流
  • 原文地址:https://www.cnblogs.com/zjp-/p/9005857.html
Copyright © 2011-2022 走看看