SOURCE

console 命令行工具 X clear

                    
>
console
<!-- 水平居中 -->

<p>正常的段落</p>
<p>正常的段落</p>
<p>正常的段落</p>
<!-- 内容居中 -->
<p align="center">align属性居中的段落</p>
<p class="center">css居中的段落</p>

<!-- 元素居中 -->
<div>默认情况下div宽度100%, 无法看出是否被选中</div>
<div style="width:100px;margin: 0 auto;">设置div的宽度, 然后设置margin:0 auto 居中</div>

<span>span是内联元素, 无法设置宽度, 所以不能使用margin:0 auto 实现居中</span>
<div align="center"><span>可以放在div中, 设置div的align="center" 居中</span></div>

<div class="center"><span>可以放在div中, 也可以设置div的text-align:"center" 居中</span></div>

<!-- 垂直居中 -->

<div class="lh">line-height适合单独一行垂直居中</div>
<div class="padding_center">通过设置上下内边距可以实现多行文本垂直居中 通过设置上下内边距可以实现多行文本垂直居中 通过设置上下内边距可以实现多行文本垂直居中 通过设置上下内边距可以实现多行文本垂直居中 通过设置上下内边距可以实现多行文本垂直居中</div>

<div class="dis_table">把div用单元格的形式显示,然后借用单元格的垂直居中vertical-align:middle. 通过设置display:table-cell, 然后设置vertical-align:middle, 再指定高度, 这样也可以是图片垂直居中, line-height就不能是图片居中</div>
div{
  border: 1px solid black;
}

.center{
  text-align:center;
}

.lh{
  line-height: 100px;
}

.padding_center{
  padding: 30px 0;
}

.dis_table{
  display: table-cell;
  vertical-align: middle;
  height: 100px;
}