css居中与布局

- 水平居中

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

  <p class="cen">居中</p>     //html代码
  .cen{                      //css代码
  text-align:center;
  border:1px solid red;
  }

2.块级元素

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

  <div class="first"></div>          //html
  .first{                            //css
        width:20px;
        height:20px;
        margin:0 auto;
        border:1px solid red;
  }

- 垂直居中

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

  <div class="first">first</div>      //html
  .first{                             //css
        width:200px;
        padding-top:20px;
        padding-bottom:20px;
        border:1px solid red;
  }

2.设置height与line-height相等

 <div class="first">first</div>      //html
  .first{                            //css
  width:100px;
  height: 50px;
  line-height: 50px;
  border:1px solid red;
  }

- 左右布局

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

<div class="first">leftcontent</div>
<div class="second">rightcontent</div>
.first{                       
  width:100px;
  height: 100px;
  float:left;
  border:1px solid red;
}
.second{                       
  width:100px;
  height: 100px;
  float:right;
  border:1px solid green;
}

- 左中右布局

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

<div class="out">
    <div class="clearfix inner" style="float:left"> 
        <div class="first">left</div>
        <div class="first">middle</div>  
     </div>   
     <div class="third">right</div>
</div> 

.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 高清壁纸