【亚洲必赢官网】笔直居中,css中二种常见的居中格局

CSS达成垂直居中的常用方法

2016/03/09 · CSS · 6
评论 ·
笔直居中

原文出处: 渔歌   

  在前端开发进度中,盒子居中是常事使用的。其中
,居中又有什么不可分成水平居中和垂直居中。水平居中是相比不难的,直接设置元素的margin:
0
auto就可以达成。可是垂直居中相对来说是相比较复杂一些的。下边我们联合来琢磨一下已毕垂直居中的方法。

先是,定义一个急需垂直居中的div元素,他的增进率和中度均为300px,背景观为粉色。代码如下:

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>index</title> <style>
.content { width: 300px; height: 300px; background: orange; }
</style> </head> <body> <div
class=”content”></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .content {
            width: 300px;
            height: 300px;
            background: orange;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

    

  效果如下:

 亚洲必赢官网 1

 
 大家要求使得这些棕色的div居中,到底该怎么做呢?首先大家完毕程度居中,上边已经关系过了,可以透过安装margin:
0 auto完结程度居中,代码如下:

 

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>index</title> <style>
.content { width: 300px; height: 300px; background: orange; margin: 0
auto; } </style> </head> <body> <div
class=”content”></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

 

    效果如下:

亚洲必赢官网 2

   
很好,已经完结程度居中了!接下去该打大boss了——落成垂直居中。可是,在那从前,我们先要设置div元素的祖先元素html和body的惊人为100%(因为他俩默许是为0的),并且消除默许样式,即把margin和padding设置为0(假若不清除默许样式的话,浏览器就会并发滚动条,聪明的亲,自己想想问哪些)。

 

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>index</title> <style> html,
body { width: 100%; height: 100%; margin: 0; padding: 0; } .content {
width: 300px; height: 300px; background: orange; margin: 0 auto;
/*水平居中*/ } </style> </head> <body> <div
class=”content”></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

   

   接下来,须求做的业务就是要让div往下活动了。大家都知情top属性可以使得元素向下偏移的。可是,由于默许处境下,元素在文档流里是从上往下、从左到右紧密的布局的,大家不得以一贯通过top属性改变它的垂直偏移。那就需求利用position属性,设置它的值为relative,就足以透过top、bottom、right、left等质量使它在正常的文档流中生出地点偏移(注意,此时它在并不曾脱离文档流,原来的地点还会占用着的!)。对于position属性不熟知的,可以团结去w3c看一下。设置了position:
relative后的代码如下:

 

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>index</title> <style> html,
body { width: 100%; height: 100%; margin: 0; padding: 0; } .content {
width: 300px; height: 300px; background: orange; margin: 0 auto;
/*水平居中*/ position: relative; /*脱离文档流*/ } </style>
</head> <body> <div class=”content”></div>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脱离文档流*/
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

 

 
  我们刷新一下页面,发现跟从前是从未有过其他变更的,因为,大家唯有是使div脱离了文档流,可是还没起始运动她的垂直偏移。好,上面大家就让它偏移呢!垂直偏移要求用到top属性,它的值可以是现实性的像素,也足以是比例。因为大家前些天不清楚父元素(即body)的实际高度,所以,是不能够通过具体像一向偏移的,而相应用百分数。既然是要让它居中嘛!好,那么大家就让它的值为50%不就行了吗?难点确实那么粗略,大家来试一下,就设置50%试一下:

 

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>index</title> <style>
html,body { width: 100%; height: 100%; margin: 0; padding: 0; } .content
{ width: 300px; height: 300px; background: orange; margin: 0 auto;
/*水平居中*/ position: relative; /*剥离文档流*/ top: 50%; /*偏移*【亚洲必赢官网】笔直居中,css中二种常见的居中格局。/
} </style> </head> <body> <div
class=”content”></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脱离文档流*/
            top: 50%; /*偏移*/
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

 

    效果如下图所示:

亚洲必赢官网 3

 
  div垂直方向方面并从未居中。鲜明是偏下了。上面,大家在浏览器中间画一条红线用来参考,如下图:

亚洲必赢官网 4

 
  通过观看上图,只要让div的为主移动到红线的岗位,那么所有div就居中了。那怎么让它基本移动到红线处呢?从图中可以洞察到,从div的宗旨到红线的距离是div自身高度的一半。那时候,大家可以利用通过margin-top属性来设置,因为div的自我中度是300,所以,必要安装他的margin-top值为-150。为啥是要设置成负数的呢?因为正数是向下偏移,我们是可望div向上偏移,所以应该是负数,如下:

 

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>index</title> <style>
html,body { width: 100%; height: 100%; margin: 0; padding: 0; } .content
{ width: 300px; height: 300px; background: orange; margin: 0 auto;
/*水平居中*/ position: relative; /*退出文档流*/ top: 50%; /*偏移*/
margin-top: -150px; } </style> </head> <body> <div
class=”content”></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脱离文档流*/
            top: 50%; /*偏移*/
            margin-top: -150px;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

 

功能如下:

亚洲必赢官网 5

    确实已经居中了。好开心!有木有?!

 
  除了可以选拔margin-top把div往上偏移之外,CSS3的transform属性也足以兑现这些功能,通过安装div的transform:
translateY(-50%),意思是驱动div向上移动(translate)自身中度的一半(50%)。如下:

 

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>index</title> <style>
html,body { width: 100%; height: 100%; margin: 0; padding: 0; } .content
{ width: 300px; height: 300px; background: orange; margin: 0 auto;
/*水平居中*/ position: relative; /*剥离文档流*/ top: 50%; /*偏移*/
transform: translateY(-50%); } </style> </head> <body>
<div class=”content”></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脱离文档流*/
            top: 50%; /*偏移*/
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

 

    效果如下:

亚洲必赢官网 6

 
  上边的二种艺术,大家都是根据设置div的top值为50%过后,再拓展调整垂偏移量来促成居中的。倘诺选拔CSS3的弹性布局(flex)的话,难题就会变得简单多了。使用CSS3的弹性布局很粗略,只要设置父元素(那里是指body)的display的值为flex即可。具体代码如下,对代码不做过多的诠释,假设想驾驭弹性布局的可以看阮一峰名师的博客:

 

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>index</title> <style>
html,body { width: 100%; height: 100%; margin: 0; padding: 0; } body {
display: flex; align-items: center; /*定义body的因素垂直居中*/
justify-content: center; /*定义body的里的要素水平居中*/ } .content {
width: 300px; height: 300px; background: orange; } </style>
</head> <body> <div class=”content”></div>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
 
        body {
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;        
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

 

    效果:

亚洲必赢官网 7

 
  除了下边3中艺术之外,当然或许还设有很多的可以落成垂直居中的方法。比如能够将父容器设置为display:table
,然后将子元素也就是要笔直居中体现的元素设置为 display:table-cell
。不过,那是不值得推荐的,因为会破坏全部的布局。假若用table布局,那么为啥不间接运用table标签了?那不越发有利呢?

 
  关于CSS完结垂直居中的方法,就写那样多了。假诺,发现什么地方写的非正常的要么有更好的格局的,请在评论提议来,那样大家可以协同谈谈、共同升高!

1 赞 9 收藏 6
评论

亚洲必赢官网 8

一直上代码:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width,
initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>居中</title>
<style>
{
margin: 0;
padding: 0;
}
/
水平居中 margin : 0 auto; */
.box{
width: 300px;
height: 300px;
border: 2px solid red;
}
.img1{
display: block;
width: 100px;
height: 100px;
margin: 0 auto;
}

三行代码完成内外居中

纯属居中,垂直居中

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta name=”author” content=”胡超” />
<meta charset=”utf-8″/>
<style type=”text/css”>

#a2{
position:absolute;
/*:绝对定位元素不在普通内容流中渲染,因而margin:auto可以使内容在经过top:
0; left: 0; bottom: 0;right:
0;设置的境界内垂直居中。父元素一般为body或者表明为position:relative;的器皿。无需精晓被垂直居中元素的高和宽。*/
top:0;
right:0;
left:0;
bottom:0;
margin: auto;
width:290px;
height:121px;
border:1px solid red;
}
#a1{
width:500px;
height:500px;
border:1px solid red;
position:relative;
}

</style>
</head>

<body>

<div id=”a1″>
<div id=”a2″>

</div>
</div>

</body>
</html>

!DOCTYPE html html head title
new document /title meta name=”author” content=”胡超” / meta
charset=”utf-8″/ style type=”text/css” #a2{ position:absolu…

亚洲必赢官网 9

position: relative;
top: 50%;
transform: translateY(-50%);

1.0.jpg

意义如下:

  /*水平垂直居中*/
  .box2{
    width: 300px;
    height: 300px;
    position: relative;
    border: 1px solid blue;
    background: yellow;
  }
  .img2{
      width: 100px;
      height: 100px;
      position: absolute;
      top:50%;
      left:50%;
      margin-left: -50px;
      margin-top: -50px;
   }

亚洲必赢官网 10

亚洲必赢官网 11

 

2.0.jpg

代码:

       /*水平垂直居中  2   */
   .box3{
     width: 300px;
     height: 300px;
     position: relative;
     border: 1px solid blue;
   }
   .img3{
       width: 100px;
       height: 100px;
       position: absolute;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       margin: auto;
    }

<!DOCTYPE html>
亚洲必赢官网 ,<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>css123</title>
<style>
body {
background: #2ae0bb;
}
.box {
width: 40%;
height: 500px;
background: #008800;
}
.text {
width: 40%;
height: 200px;
background: #e0e0e0;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.text span{
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
background: #18aa8c;
}

亚洲必赢官网 12

</style>
</head>
<body>
<div class=”box”>
<div class=”text”>
<span>那是一个居中元素块。</span>
</div>
</div>
<div class=”pool”>
<div class=”text-dec”>
<span>Look!I’m here.while just you know.</span>
</div>
</div>

3.0.jpg

</body>
</html>

       /*水平垂直居中  3   css3新属性 */
    .box4{
      width: 300px;
      height: 300px;
      position: relative;
      border: 1px solid blue;
    }
    .img4{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
     }

亚洲必赢官网 13

亚洲必赢官网 14

亚洲必赢官网 15

4.0.jpg

 

     /* table-cell  将其变为表格 */
     .box5{
       width: 300px;
       height: 300px;
       display: table-cell;
       vertical-align: middle;
       text-align: center;
       border: 1px solid blue;
     }
     .img5{
         width: 100px;
         height: 100px;
      }

div宽度为百分比,想让中度和宽窄一样,即让div为正方形落成形式

亚洲必赢官网 16

width: 20%;
height: 0;
padding-bottom: 20%;

5.0.jpg

效果图:

      /* flex布局完成 */
      .box6{
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid blue;
      }
      .img6{
          width: 100px;
          height: 100px;
       }

亚洲必赢官网 17

亚洲必赢官网 18

代码:

6.0.jpg

 

</style>
</head>
<body>
<div class=”box”>

<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>square</title>
<style>
body {
background: #2ae0bb;
}
.aa {
width: 20%;
height: 0;
padding-bottom: 20%;
background: #095c05;
margin: 0 auto;
}
.aa .cc{
position: relative;
top: 50%;
transform: translateY(50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
width: 18%;
height: 0;
padding-bottom: 18%;
background: #E6E6E6;
margin: 0 auto;
}

亚洲必赢官网 19

</style>
</head>
<body>
<div class=”aa”>
<div class=”cc”></div>
</div>

</div>
<div class=”box2″>

</body>
</html>

亚洲必赢官网 20

 

</div>
<div class=”box3″>

 

亚洲必赢官网 21

 

</div>
<div class=”box4″>

亚洲必赢官网 22

亚洲必赢官网 23

</div>
<div class=”box5″>

亚洲必赢官网 24

</div>
<div class=”box6″>

亚洲必赢官网 25

</div>
</body>
</html>

网站地图xml地图