feishuang008

导航

CSS垂直水平居中

小小的总结一下：行内元素水平居中用text-align: center;块级元素水平居中用margin-left: auto; margin-right: auto;

 

首先讨论一下单行时的情况。

毫无疑问，这是最简单的一种情况。

HTML结构如下：

1 <div class="demo">
2     <span>111111111111111111111111111111111111</span>
3 </div>

高度不固定（这种方法同样适用于多行文时的情况，下面就不再讨论）

1 .demo {
2     text-align: center; 
3     padding-top: 20px;
4     padding-bottom: 20px;
5 }

高度固定

1 .demo {
2     text-align: center;
3     height: 100px;
4     line-height: 100px;
5 }

 

接下来，讨论下多行时的情况。

HTML结构如下：

1 <div class="demo">
2     <span>111111111111111111111111111111111111<br />22222222222222222222</span>
3 </div>

高度不固定时只需要添加pading值就可以，不多加讨论了。

高度固定时

方法一：父元素设置display: table，子元素设置display:table-cell。利用了表格的特性。

 1 .demo {
 2     height: 100px;
 3     display: table;
 4     margin-left: auto;
 5     margin-right: auto;
 6 }
 7 .demo span {
 8     display: table-cell;
 9     vertical-align: middle;
10 }

方法二：父元素设置position: relative，子元素设置position: absolute。主要是利用了translate的中心是相对于元素本身的特点。

 1 .demo {
 2   position: relative;
 3   height: 100px;
 4 }
 5 
 6 .demo span {
 7   position: absolute;
 8   left: 50%;
 9   top: 50%;
10   -webkit-transform: translate(-50%, -50%);
11       -ms-transform: translate(-50%, -50%);
12           transform: translate(-50%, -50%);
13 }

方法三：利用flex布局。

 1 .demo {
 2   height: 100px;
 3   display: -webkit-box;
 4   display: -webkit-flex;
 5   display: -ms-flexbox;
 6   display: flex;
 7   -webkit-box-pack: center;
 8   -webkit-justify-content: center;
 9       -ms-flex-pack: center;
10           justify-content: center;
11   -webkit-box-align: center;
12   -webkit-align-items: center;
13       -ms-flex-align: center;
14           align-items: center;
15 }

方法四：利用:after,:before伪类，结合inline-block的特性实现垂直居中。

 1 .demo {
 2   height: 100px;
 3   text-align: center;
 4 }
 5 
 6 .demo:after, .demo:before {
 7   display: inline-block;
 8   vertical-align: middle;
 9   width: 0;
10   height: 100%;
11   visibility: hidden;
12   content: '';
13 }
14 
15 .demo span {
16   display: inline-block;
17   vertical-align: middle;
18 }

 

暂时就想到这些了。

posted on 2016-04-22 12:30  feishuang008  阅读(283)  评论(0)  编辑  收藏  举报