常用CSS代码（一）

1、一行文本居中，多行文本左对齐

实现思路：内容区域设置display:inline-block;text-align:left；父元素设置text-align:center

代码：

<div class="box">
    <div class="content">这是内容区域</div>
</div>

<!-- start:css -->
<style>
    .box{
        text-align: center;width: 100px;
    }
    .content{
        display: inline-block;text-align: left;
    }
</style>    
<!-- end:css -->   

 

2、实现三角形（使用透明色）

　　

<style>
    div {
        width: 0;
        height: 0;
        border: 30px solid;
        border-color: transparent transparent red;
    }
</style>

<div></div>

 

3、垂直居中

• 使用flex布局（设置父元素为flex）

  <style>
      .father {
          width: 500px;
          height: 300px;
          background-color: red;
          display: flex;
          justify-content: center;
          align-items: center;
      }
   
      .son {
          background-color: green;
      }
  </style>
   
  <div class="father">
      <div class="son">我是块级元素</div>
  </div>

• 使用absolute布局（父元素设置相对定位，子元素设置绝对定位）

  <style>
      .father {
          width: 500px;
          height: 300px;
          background-color: red;
          position: relative;
      }
   
      .son {
          background-color: green;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translateX(-50%) translateY(-50%);
      }
  </style>
   
  <div class="father">
      <div class="son">我是块级元素</div>
  </div>