css综合（重点：垂直居中）

2017-09-07 本文已影响0人 Zuo_鸣

编码规范

参考网址
- 缩进与空格
- 选择器的书写
- ……

垂直居中的实现方法

文字上下padding相同时，则文字垂直居中
和line-Height使用更佳
```
      p {
         text-align: center;
         padding: 30px 0px;
       } 
```
效果预览

绝对居中:利用position:absolute

    .parent {
          height :500px;
          background-color: rgb(223,225,180);
          position: relative;
      }

有固定高度时，利用margin来进偏移

 .child {
      border:1px solid red;
      width:200px;
      height:100px;/*必须定高度*/
      position: absolute;
      margin-top:-50px;/*宽度的一半*/
      margin-left:-100px;/*高度的一半*/
      left: 50%;
      top: 50%;
   }

效果预览

没有固定宽高，利用transform：translate(-50%,-50%)进行偏移，ps：要注意它的兼容性

    .child {
         border:1px solid red;
         position: absolute;
         left: 50%;
         top: 50%;
         transform:translate(-50%,-50%);
   }

效果预览

vertical-align:middle实现居中
作用在行列元素和表格上
原理：利用行列元素的对齐方式，而其中最高部分刚好等于边框高度，以此实现垂直居中

html

   <!DOCTYPE html>
   <html>
   <head>
   <meta charset="utf-8">
   <title>JS Bin</title>
   </head>
   <body>
   <div class="parent">
       <span class="befor"></span><div class="child">
     饥人谷饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷 饥人谷  
       </div><span class="after"></span>
   </div>
   </body>
   </html>

可以把span.befor,child,span.after这三部分看作是三个文字

css

  .parent {
        border: 2px solid red;
        height:600px;
        text-align:center;
  }
  .child {
        border: 1px solid #000;
        width:300px;
        display: inline-block;
        vertical-align:middle;
  }
  span.befor {
        / *outline: 2px solid yellow;*/
        height:100%;
        display:inline-block;
        vertical-align:middle;
  }
  span.after{
        /*outline: 2px solid yellow;*/
        height:100%;
        display:inline-block;
        vertical-align:middle;
  }

（1）再没有加vertical-align：middle时，是以底部为基准对齐了

（2）在所有子元素中加了vertical-align:middle时，以span中线为基准，对齐了

（3）最后，把span的边框去掉，就能实现
效果预览

使用table-cell实现居中
效果预览

实现以下效果

效果预览

html

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>JS Bin</title>
 </head>
 <body>
    <div class="box">
        <div class="tr1"></div>
        <div class="con"></div>
    </div>
    <div class="box">
        <div class="tr2"></div>
        <div class="con"></div>
    </div>
    <div class="box">
        <div class="tr3"></div>
        <div class="con"></div>
    </div>  
</body>
</html>

css

 .box {
    margin-bottom:50px;
    position: relative;
    margin-top:20px;
}
.con {
    width:200px;
    height:100px;
    border:1px solid #ccc;
    margin-top:10px;
}
.tr1 {
    position:absolute;
    top:-10px;
    left:10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ccc;
}
.tr2 {
    position: absolute;
    top:0px;
    left:182px;
    border-top: 10px solid red;
    border-right: 10px solid red;
    border-left: 10px solid transparent;
    border-bottom: 10px solid transparent；  
}
.tr3 {
    position:absolute;
    top:-9px;
    left:10px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:10px solid #ccc; 
}
.tr3:after {
    content:'';
    position:absolute;
    top:1px;
    left:-10px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:10px solid #fff;
}

css综合（重点：垂直居中）

编码规范

垂直居中的实现方法

实现以下效果

猜你喜欢

热点阅读