关于水平垂直居中,这是一个很简单的问题,但是很多时候,往往简单的东西,反而做不出来。这就是基础不扎实的缘故吧,我参照一些资料,总结了水平垂直居中的几种方法如下:

1 .文字水平垂直居中

这个比较简单,只要分别设置水平集中和垂直居中即可

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style lang="">
 7         div{
 8             width:500px;
 9             height:100px;
10             background: #ccc;
11             text-align:center;
12             line-height: 100px;
13         }
14     </style>
15 </head>
16 <body>
17     <div>
18         I am huanying2015!
19     </div>
20 </body>
21 </html>

 

2.水平垂直居中

2.1 把父元素设置成相对定位,子元素设置成绝对定位,margin为auto,left/right/top/bottom都分别设置为0;(备注:如果不是图片,是其他子元素的话,要设定子元素的宽和高,否则显示不出来,行内元素(inline)是没有宽高的,会聚集到最中央的一点去)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style lang="">
 7         .box{
 8             width:500px;
 9             height:500px;
10             background: #ccc;
11             margin:30px auto;
12             position:relative;
13         }
14         img{
15             position:absolute;
16             margin:auto;
17             left:0;
18             right:0;
19             top:0;
20             bottom: 0;
21         }
22 
23     </style>
24 </head>
25 <body>
26     <div class="box">
27         <img src="picture.jpg" alt="">
28     </div>
29 </body>
30 </html>

分析:子元素的上下左右(top/bottom/left/right)都设置为0,margin设置为auto;从四个方向进行定位,可以形象的看作是从四面拉扯,最终在中间进行平衡~~,形象一点,可以叫做四面拉扯法或者四点定位法

2.2  子元素居中,从原理上进行定位:

父元素设置position为relative;元素设置为absolute;要居中定位,实际上是要找子元素的起始点的位置,也就是左上角的点位置;一个元素,起始点定了,加上它本身的高和宽,这个元素就定型了;父元素的width/height,相当于子元素的left/top;子元素在父素中的定位,实际上就是本身margin的变化,这样,就可以找到子元素的起始点了:

子y = top*50% - margin-top*50%;   子x = left*50%- margin-left*50%;代码表示如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style lang="">
 7         .box{
 8             width:500px;
 9             height:500px;
10             background: #ccc;
11             margin:30px auto;
12             position:relative;
13         }
14         .child{
15             position:absolute;
16             width:200px;
17             height:200px;
18             top:50%;
19             left:50%;
20             margin-left:-100px;
21             margin-top:-100px;
22             background: #666;
23         }
24     </style>
25 </head>
26 <body>
27     <div class="box">
28         <span class="child"></span>
29     </div>
30 </body>
31 </html>

2.3  采用table的属性,将父元素设置display:table-cell;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style lang="">
 7         .box{
 8             width:500px;
 9             height:500px;
10             background: #ccc;
11             display:table-cell;
12             vertical-align:middle;
13             text-align:center;
14             margin:30px auto;
15             position:relative;
16         }
17         .child{
18             display:inline-block;
19             width:200px;
20             height:200px;
21             background: #666;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="box">
27         <span class="child"></span>
28     </div>
29 </body>
30 </html>

2.4 采用盒子模型flex;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style lang="">
 7         .box{
 8             width:500px;
 9             height:500px;
10             background: #ccc;
11             margin:30px auto;
12             position:relative;
13             display:flex;
14             display:-webkit-flex;
15             align-items:center;
16             -webkit-align-items:center;
17             justify-content:center;
18         }
19         .child{
20             width:200px;
21             height:200px;
22             background: #666;
23         }
24     </style>
25 </head>
26 <body>
27     <div class="box">
28         <span class="child"></span>
29     </div>
30 </body>
31 </html>

 2.5  采用Css3 的 transform 的translate属性进行水平垂直居中:

 1 <!DOCTYPE html>
 2   <html lang="en">
 3   <head>
 4       <meta charset="UTF-8">
 5       <title>Document</title>
 6       <style lang="">
 7           .box{
 8               width:500px;
 9               height:500px;
10              background: #ccc;
11              margin:30px auto;
12              position:relative;
13          }
14          .child{
15              position:absolute;
16              width:200px;
17              height:200px;
18              top:50%;
19              left:50%;
20              background: #666;
21              -ms-transform: translate(-50%,-50%);
22              -moz-transform: translate(-50%,-50%);
23              -o-transform: translate(-50%,-50%);
24              transform: translate(-50%,-50%);
25          }
26      </style>
27  </head>
28  <body>
29      <div class="box">
30          <span class="child"></span>
31      </div>
32  </body>
33  </html>

运行结果:

 

posted on 2017-09-08 10:24  huanying2015  阅读(586)  评论(0编辑  收藏  举报