h5学习笔记：line-height和height组合居中

布局的时候经常使用到水平居中，所以 margin: 0 auto; 非常好用，前提是需要将div 设置一个宽度。

1.水平居中

.center{
   width:1200px;
   margin: 0 auto;
}

<div class ='center'>
   我要测试水平居中
</div>

文本居中的时候，例如p标签，h2标签 使用 text-align: center; 对标签元素进行居中处理。

2.垂直居中

经常使用ul 和li 无序列表的时候，li需要为其设置一个高度，同样设置line-height 则可以实现到垂直居中的效果。

  ul li{
     height:80px;
     line-height: 80px;
}

3. text-indent 文本缩进

使用文本缩进可以实现文本偏移位置，类似padding 缩进内距

4. display: inline-block;

使用内块区别于block的使用，做到包住一个元素的周边，适合图片。 display: block; 显示整一个区块。

5. 使用虚线 ;border:1px dashed #333;

有时候会需求hr是填充是虚线，于是可以对border:1px dashed #333;进行虚线处理。

6. 圆角处理

使用border-radius: 10px; 对圆角进行处理。

7. position: relative; 和position: absolute; 组合重叠一起排版

有时候经常需要在图片上编写文字效果。这个时候，在外层div 的时候需要设置相对定位，而在内置div的时候需要进行绝对定位设置文字排版。绝对定位的时候则会使用left 和top = 50%的做法 再配合margin的外边距的方式 margin 进行居中处理。

8. opacity: 0.5; 透明度处理

使用opacity进行透明化处理。