css居中与布局

- 水平居中

1.行内元素:text-align:center

  
居中
     //html代码
  .cen{                      //css代码
  text-align:center;
  border:1px solid red;
  }

2.块级元素

让块级元素居中的方法就是设置 margin-left 和 margin-right 为 auto
margin:0 auto

  
          //html
  .first{                            //css
        width:20px;
        height:20px;
        margin:0 auto;
        border:1px solid red;
  }

- 垂直居中

1.设置padding-top与padding-bottom相等

  
first
      //html
  .first{                             //css
        width:200px;
        padding-top:20px;
        padding-bottom:20px;
        border:1px solid red;
  }

2.设置height与line-height相等

 
first
      //html
  .first{                            //css
  width:100px;
  height: 50px;
  line-height: 50px;
  border:1px solid red;
  }

- 左右布局

通过float浮动实现，float:left与float:right

leftcontent
rightcontent
.first{                       
  width:100px;
  height: 100px;
  float:left;
  border:1px solid red;
}
.second{                       
  width:100px;
  height: 100px;
  float:right;
  border:1px solid green;
}

- 左中右布局

思路：使用div将左中左浮，右侧右浮

    
 
        
left
        
middle
  
     
   
     
right
 

.out{
    width:354px;
    height:100px;
    border:1px solid red;
}
.clearfix::after{
    content:'';
    display:block;
    clear:both;
}
.first{                       
  width:100px;
  height: 100px;
  float:left;
  border:1px solid red;
}
.second{                       
  width:100px;
  height: 100px;
  float:left;
  border:1px solid green;
  margin-left:25px;
}
.third{                       
  width:100px;
  height: 100px;
  float:right;
  border:1px solid green;
}

其他技巧：

google关键字：

• css shadow generator 生成阴影
• css gradient generator 渐变背景
• webpage free psd 免费psd文件
• dribbble 网站
• css tricks shape css形状代码
• iconfont.cn 图标库
• wallhaven 高清壁纸