澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

为什么你写的,div垂直居中的N种方法

前端小知识:为什么你写的 height:100% 不起作用

2018/01/08 · CSS · 3 评论 · height

原文出处: JiaXinYi   

 

为什么你写的,div垂直居中的N种方法。在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS

Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生

效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起

作用。 

    相关教程:div水平居中的N种方法

    一、单行垂直居中

    如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

如: 

div { 
        height:25px; 
        line-height:25px; 
        overflow:hidden; 

    这段代码很简,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。更多CSS教

程。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
  <title> 单行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
  height:25px;
  line-height:25px;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
}
  </style>
</head>
<body>
  <div>现在我们要使这段文字垂直居中显示!</div>
</body>
</html>

二、多行未知高度文字的垂直居中

    如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的

padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全填充的一种访求而已。可以使用类似下

面的代码: 

div { 
padding:25px; 

    这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
  padding:25px;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
}
  </style>
</head>
<body>
  <div><pre>现在我们要使这段文字垂直居中显示!
   div {
  padding:25px;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
}
</pre></div>

</body>
</html>
三、多行文本固定高度的居中

    在本文的一开始,我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display

属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意,display:table和

display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:

div#wrap { 
    height:400px; 
display:table; 

div#content { 
  vertical-align:middle; 
    display:table-cell; 
   border:1px solid #FF0099; 
background-color:#FFCCFF; 
width:760px; 
}  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
  height:400px;
  display:table;
}
div#content {
  vertical-align:middle;
  display:table-cell;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
}
  </style>
</head>
<body>
<div id="wrap">
  <div id="content"><pre>现在我们要使这段文字垂直居中显示! Webjx.Com
div#wrap {
  height:400px;
  display:table;
}
div#content {
  vertical-align:middle;
  display:table-cell;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
}
</pre></div>
</div>
</body>
</html>
    这个方法应该是很理想了,但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell,因此这种方法在

Internet Explorer 6及以下的版本中是无效的。嗯,这让人很郁闷!不过我们还其它的办法
四、在Internet Explorer中的解决方案

    在Internet Explorer 6及以下版本中,在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后,如果再对子元素

进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的

高度,而从父元素继承来的定位高度)。例如,我们有下面这样一个(X)HTML代码段: 

<div id="wrap">
<div id="subwrap">
   <div id="content">
</div>
</div>
</div>
    如果我们对subwrap进行了绝对定位,那么content也会继承了这个这个属性,虽然它不会在页面中马上显示出来,但是如果再对content进

行相对定位的时候,你使用的100%分比将不再是content原有的高度。例如,我们设定了subwrap的position为40%,我们如果想使content的上

边缘和wrap重合的话就必须设置top:-80%;那么,如果我们设定subwrap的top:50%的话,我们必须使用100%才能使content回到原来的位置上去

,但是如果我们把content也设置50%呢?那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中: 

div#wrap { 
    border:1px solid #FF0099; 
background-color:#FFCCFF; 
width:760px; 
  height:400px; 
position:relative; 

div#subwrap { 
  position:absolute; 
    border:1px solid #000; 
    top:50%; 

div#content { 
    border:1px solid #000; 
    position:relative; 
    top:-50%; 

    当然,这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。(不过我不解,我查阅了很多文章,不知道是因为出

处相同还是什么原因,似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理,我也只是了解了一点皮毛,还要再研究) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:400px;
  position:relative;
}
div#subwrap {
  position:absolute;
  top:50%;
}
div#content {
  position:relative;
  top:-50%;
}
  </style>
</head>
<body>
<div id="wrap">
  <div id="subwrap">
   <div id="content"><pre>现在我们要使这段文字垂直居中显示!
div#wrap {
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:500px;
  position:relative;
}
div#subwrap {
  position:absolute;
  border:1px solid #000;
  top:50%;
}
div#为什么你写的,div垂直居中的N种方法。content {
  border:1px solid #000;
  position:relative;
  top:-50%;
}</pre>
  </div>
</div>
</div>
</body>
</html>
五、完美的解决方案

    那么我们综合上面两种方法就可以得到一个完美的解决方案,不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器,你可

以参考这篇“简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera”: 

div#wrap { 
    display:table; 
    border:1px solid #FF0099; 
background-color:#FFCCFF; 
width:760px; 
  height:400px; 
_position:relative; 
   overflow:hidden; 

div#subwrap { 
    vertical-align:middle; 
    display:table-cell; 
   _position:absolute; 
   _top:50%; 

div#content { 
   _position:relative; 
   _top:-50%; 

    至此,一个完美的居中方案就产生了。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
  <title> 多行文字实现垂直居中 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
  display:table;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:400px;
  _position:relative;
  overflow:hidden;
}
div#subwrap {
  vertical-align:middle;
  display:table-cell;
  _position:absolute;
  _top:50%;
}
div#content {
  _position:relative;
  _top:-50%;
}
  </style>
</head>
<body>
<div id="wrap">
  <div id="subwrap">
   <div id="content"><pre>现在我们要使这段文字垂直居中显示!
div#wrap {
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:500px;
  position:relative;
}
div#subwrap {
  position:absolute;
  border:1px solid #000;
  top:50%;
}
div#content {
  border:1px solid #000;
  position:relative;
  top:-50%;
}</pre>
  </div>
</div>
</div>
</body>
</html>
     p.s. 垂直居中vertical-align的值是middle,而水平居中align的值是center,虽然同是居中但关键字不同

1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用

CSS雪碧图是指将网站上的图标合成在一张图片上,用background-position的方式加以应用,以减少页面请求的数量,使页面加载更快速。

CSS定位问题(3):相对定位,绝对定位

2016/04/30 · CSS · 4 评论 · 定位, 相对定位, 绝对定位

本文作者: 伯乐在线 - zhiqiang21 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

为什么你写的height:100%不起作用?

这个知识不算冷门的,但是用的时候可能还是会有些懵逼,不能生效时搜一搜就能找到答案了,但是你真的懂了吗?为什么想要设置一个全屏元素的时候,高度不受%的控制?

2.img标签和CSS背景使用图片在使用场景上有何区别?

CSS背景图常用于页面上不变的内容,而当页面上的图片内容需要经常变动或者有链接功能时使用img标签。

引子:

开始的时候我想先要解决一个问题,怎么设置一个div盒子撑满整个屏幕?

看下面的html代码:

XHTML

<body> <div id="father-body"> <div class="item1"></div> </div> </body>

1
2
3
4
5
<body>
    <div id="father-body">
        <div class="item1"></div>
    </div>
</body>

实现方法一:

JavaScript

html, body,#father-body{ height:100%; width:100%; background-color:#123456; }

1
2
3
4
5
html, body,#father-body{
            height:100%;
            width:100%;
            background-color:#123456;
        }

这里主要解释下%(百分号)在CSS中使用的问题。% 主要是在父级元素或者是祖先元素定义了固定的widthheight 的时候才可以使用(或者说使用的时候才会有效果)。

实现方法二:

JavaScript

#father-body{ position:fixed; width:100%; height:100%; background-color:#123456; }

1
2
3
4
5
6
#father-body{
            position:fixed;
            width:100%;
            height:100%;
            background-color:#123456;
        }

这里为#father-body 设置position属性,触发自身的BFC。当对自身使用widthheight的时候才可以生效。

position的fixed值的含义:

对象脱离常规流,使用 toprightbottomleft等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。

1.百分比宽高的设定

按照w3c中的width和height属性,可以明确%设定宽高是根据父元素的宽高来的:
http://www.w3school.com.cn/cs…
http://www.w3school.com.cn/cs…

图片 1

3.titlealt属性分别有什么作用?

alt是当内容无法加载时显示的替代文本,title是当鼠标移动到超链接上时的说明文本。

图片 2

Paste_Image.png

position属性的几个值的概念:

2.width:100%;

我们写下这样一段代码,随意设置一个背景色便于观察元素

JavaScript

<body> <div style="width:100%;height:100%;background-color:blueviolet;"> width:100%;height:100%; </div> </body> //宽100%,我们现在看到的高是属于font-size的,而不是100%;

1
2
3
4
5
6
<body>
    <div style="width:100%;height:100%;background-color:blueviolet;">
    width:100%;height:100%;
    </div>
</body>
//宽100%,我们现在看到的高是属于font-size的,而不是100%;

图片 3

JavaScript

<body> <div style="width:100%;height:200px;background-color:blueviolet;"> width:100%;height:200px; </div> </body> //效果如下

1
2
3
4
5
6
<body>
    <div style="width:100%;height:200px;background-color:blueviolet;">
    width:100%;height:200px;
    </div>
</body>
//效果如下

图片 4

可以看到基本上宽的100%很容易就实现的,但是这里的height却不能设置成%比的(该元素会消失看不见),这是为什么呢?

4.background: url(abc.png) 0 0 no-repeat;这句话是什么意思?

设置背景图片地址为abc.png,x轴方向偏移0,y轴方向偏移为0,不重复。

1.相对定位

有了以上的定义,来看一段代码:

XHTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .item1, .item2, .item3{ width:300px; height:100px; background-color:#123456; margin:20px; } .item2{ position:relative; /*top:40px; left:40px;*/ margin:40px 0 0 40px; } </style> </head> <body> <div> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .item1, .item2, .item3{
        width:300px;
        height:100px;
        background-color:#123456;
        margin:20px;
    }
        .item2{
            position:relative;
            /*top:40px;
            left:40px;*/
            margin:40px 0 0 40px;
        }
    </style>
</head>
<body>
    <div>
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>
</html>

效果如下图:
图片 5

当我们使用top right bottom left 这样的属性的时候,CSS代码如下:

CSS

<style type="text/css"> .item1, .item2, .item3{ width:300px; height:100px; background-color:#123456; margin:20px; } .item2{ position:relative; top:40px; left:40px; /*margin:40px 0 0 40px;*/ } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
    .item1, .item2, .item3{
        width:300px;
        height:100px;
        background-color:#123456;
        margin:20px;
    }
        .item2{
            position:relative;
            top:40px;
            left:40px;
            /*margin:40px 0 0 40px;*/
        }
    </style>

可以看到的效果图如下图:

图片 6

到这里可以验证当使用top right bottom left (这四个属性可以设置具体的像素数也可以设置百分比)这样属性改变元素的位置的时候,不会影响其他元素的位置。而使用margin 这样的属性改变元素的位置会影响其他元素的位置。

示意图如下(图片来自W3CSchool):
图片 7


3.浏览器是如何计算高度和宽度的

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。即我们不设置宽,会自动填满整个横向宽度,如下:

JavaScript

<div style="height:100%;">height:100%;</div>

1
<div style="height:100%;">height:100%;</div>

图片 8

但是高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。
因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。
即父元素的高度只是一个缺省值:height: auto;我们设置height:100%时,是要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined的结果。也就是一个null值,浏览器不会对这个值有任何的反应。
各个浏览器对于宽高的解析也不相同,大家可以自己搜索一下。
参考:http://www.webhek.com/post/cs…

5.background-size有什么作用? 兼容性如何? 常用的值是?

  • background-size具有调整背景图片大小的功能。
  • background-size的兼容性如下图:

图片 9

Paste_Image.png

*常用值:(举例中图片原本大小为595px449px)

2.绝对定位

看下面的一段代码:

XHTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{margin:20px;} #body-div{ padding:15px; background-color:#a0c8ff; border:1px solid #000000; } #body-div div{ padding:10px; background-color:#fff0ac; border:1px solid #000000; } </style> </head> <body> <div id="body-div"> <div class="item1">Box-1</div> <div class="item2">Box-2</div> <div class="item3">Box-3</div> </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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{margin:20px;}
        #body-div{
            padding:15px;
            background-color:#a0c8ff;
            border:1px solid #000000;
        }
 
        #body-div div{
            padding:10px;
            background-color:#fff0ac;
            border:1px solid #000000;
        }
    </style>
</head>
<body>
    <div id="body-div">
        <div class="item1">Box-1</div>
        <div class="item2">Box-2</div>
        <div class="item3">Box-3</div>
    </div>
</body>
</html>

效果图如下:

我们为Box-2设置绝对定位属性

CSS

.item2{ position:absolute; }

1
2
3
.item2{
            position:absolute;
        }

此时Box-2脱离文档流,效果如下:

图片 10

这个时候Box-3的位置会占据之前Box-2的位置。且Box-2和Box-3的左边框会重合。且盒子的宽度会根据盒子内部的元素自适应。

当盒子设置了绝对定位但是没有使用top right bottom left设置盒子的偏移量的时候,它仍会占据原先的位置。

那么当设置top right bottom left这些属性的时候会是什么效果呢?

设置下面的代码:

CSS

.item2{ position:absolute; top:0; right:0; }

1
2
3
4
5
.item2{
            position:absolute;
            top:0;
            right:0;
        }

效果如下图:

图片 11

那么当我们把直接父级元素设置为已定位的元素会怎么样呢?

图片 12

由上可以得出两个结论:

1.使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移(定位)。如果没有已经定位的祖先元素,那么就会以浏览器窗口为基准进行定位。
2.决对定位的框从标准流中脱离,这意味着它们对其后的兄弟盒子的定位没有影响。其它的盒子好像就当这个盒子(绝对定位的盒子)不存在一样。

4.如何解决

现在你知道了吧,%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height;
要特别注意的一点是,在

之中的元素的父元素并不仅仅只是,还包括了。
所以我们要同时设置这两者的height,只设置其中一个是不行的:

html,body{ height: 100%; margin: 0; padding: 0; }

1
2
3
4
5
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }

 

- background-size:300px 100px,使背景图片长宽分别为300px和100px。

<!DOCTYPE html>
<html>
<head>
<title>background-size</title>
<style type="text/css">
.div1 {
background:url(image/cat.jpg) 0 0 no-repeat;
width:650px;
height:300px;
border:1px solid #000;
background-color:#ccc;
background-size:300px 100px;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

 ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-e980262694d37ddd.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)


- ```background-size:30% 50%```,使图片长宽分别为父元素长宽的30%和50%。
- ```
<!DOCTYPE html>
<html>
<head>
    <title>background-size</title>
    <style type="text/css">
        .div1 {
        background:url(image/cat.jpg) 0 0 no-repeat;
        width:650px;
        height:300px;
        border:1px solid #000;
        background-color:#ccc;
        background-size:30% 50%;
        }
    </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

图片 13

Paste_Image.png

3.z-index属性

z-index属性用于调整定位时重叠块的上下位置,与它的名称一样,如果页面为x-y轴,则垂直于页面的方向为z轴。z-index大的页面位于其值小的的上面。

看下面的代码:

CSS

.item1{ position:relative; z-index:3; } .item2{ position:absolute; top:0; right:0; z-index:1; }

1
2
3
4
5
6
7
8
9
10
.item1{
            position:relative;
            z-index:3;
        }
        .item2{
            position:absolute;
            top:0;
            right:0;
            z-index:1;
        }

图片 14

图片 15

- background-size:contain,缩放图片以完全装入父元素,父元素可能出现留白。

<!DOCTYPE html>
<html>
<head>
<title>background-size</title>
<style type="text/css">
.div1 {
background:url(image/cat.jpg) 0 0 no-repeat;
width:650px;
height:300px;
border:1px solid #000;
background-color:#ccc;
background-size:contain;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

 ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-874fc62ee15f65ff.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)
- ```background-size:cover```,缩放背景图片以完全覆盖父元素,图片可能部分看不到。
- ```
<!DOCTYPE html>
<html>
<head>
    <title>background-size</title>
    <style type="text/css">
        .div1 {
        background:url(image/cat.jpg) 0 0 no-repeat;
        width:650px;
        height:300px;
        border:1px solid #000;
        background-color:#ccc;
        background-size:cover;
        }
    </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

图片 16

Paste_Image.png

常见定位拓展:

以下的代码我都亲测过,均可以达到效果,就不在展示效果图(如果对代码有疑问可以留言):

5.关于line-height居中的一点误解?

JavaScript

<!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>Document</title> <style> html,body{ height: 100%; margin: 0; padding: 0; } div { color: white; text-align: center; font-size: 30px; line-height: 100%; background-color: blueviolet; } </style> </head> <body> <!-- <div style="width:100%;height:100%;">width:100%;height:100%;</div> --> <div style="height:100%;">height:100%;</div> <!-- <div style="width:100%;height:200px;">width:100%;height:200px;</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
30
31
<!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>Document</title>
    <style>
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        div {
            color: white;
            text-align: center;
            font-size: 30px;
            line-height: 100%;
            background-color: blueviolet;
        }
    </style>
</head>
 
<body>
    <!-- <div style="width:100%;height:100%;">width:100%;height:100%;</div> -->
    <div style="height:100%;">height:100%;</div>
    <!-- <div style="width:100%;height:200px;">width:100%;height:200px;</div> -->
</body>
 
</html>

``全部代码如上,可以看到设置了line-height为100%没有居中,这是为什么呢,因为这时候的%是相对于字体尺寸的?所以直接作用于没有绝对高度的元素是不行的。

图片 17

line-height属性说明:http://www.w3school.com.cn/cs…
这时候要想居中,可以如下,做一个div嵌套,一个负责高度,一个负责居中,虽然感觉并不会这样用到,但是居中还是很灵验的~

JavaScript

<!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>Document</title> <style> html, body { height: 100%; margin: 0; padding: 0; } .div1 { background-color: blueviolet; position: relative; } .div2 { font-size: 30px; color: white; text-align: center; width: 400px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } </style> </head> <body> <!-- <div style="width:100%;height:100%;">width:100%;height:100%;</div> --> <div style="height:100%;" class="div1"> <div class="div2">height:100%;</div> </div> <!-- <div style="width:100%;height:200px;">width:100%;height:200px;</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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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>Document</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
 
        .div1 {
            background-color: blueviolet;
            position: relative;
        }
 
        .div2 {
            font-size: 30px;    
            color: white;
            text-align: center;                    
            width: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%)  translateY(-50%);
        }
    </style>
</head>
 
<body>
    <!-- <div style="width:100%;height:100%;">width:100%;height:100%;</div> -->
    <div style="height:100%;" class="div1">
        <div class="div2">height:100%;</div>
    </div>
    <!-- <div style="width:100%;height:200px;">width:100%;height:200px;</div> -->
</body>
 
</html>

6.如何让一个div水平居中?如何让图片水平居中

1.水平居中

图片 186.源码

https://github.com/JiaXinYi/i…

1 赞 5 收藏 3 评论

图片 19

i.
1.1行内元素的水平居中

CSS

/*行内元素水平居中*/ #body-div{ text-align:center; }

1
2
3
4
/*行内元素水平居中*/
        #body-div{
            text-align:center;
        }

- 若想使div水平居中,须给div一定宽度,margin左右设为auto:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div水平居中</title>
<style type="text/css">
.div1 {
width:600px;
height:400px;
border:1px solid #000;
background-color:#ccc;
margin:0 auto ;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

 ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-87dfb555072db708.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)
- 给该```div```配置属性```display:inline-block;```并为其父元素添加样式```text-align:center```,亦可使```div```水平居中:
- ```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>div水平居中</title>
    <style type="text/css">
        body {
            text-align:center;
        }
        .div1 {
        width:600px;
        height:400px;
        border:1px solid #000;
        background-color:#f00;
        display:inline-block;
        }
    </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

图片 20

Paste_Image.png

1.2块级元素的水平居中

CSS

/*块级元素水平居中*/ #body-div{ margin:0 auto; }

1
2
3
4
/*块级元素水平居中*/
        #body-div{
            margin:0 auto;
        }
ii.
1.3多个块级元素水平居中

CSS

/*多个块级元素水平居中*/ #body-div{ text-align:center; } ##body-div-container{ display:inline-block; }

1
2
3
4
5
6
7
/*多个块级元素水平居中*/
        #body-div{
            text-align:center;
        }
        ##body-div-container{
            display:inline-block;
        }

- 对于img元素,因为其属于行内元素,故可在其父元素上添加text-align:center样式即可实现水平居中:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务8</title>
<style>
body {
text-align:center;
}
</style>
</head>
<body>
<img src="image/cat.jpg">
</body>
</html>

 ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-49f55e20b953e761.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)
- 也可以将```img```元素添加```display:block; margin:0 auto; ```样式,同样可以达到效果:
- ```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>任务8</title>
    <style>
    img {
        display:block;
        margin:0 auto;
    }
    </style>
</head>
<body>
<img src="image/cat2.jpg">
</body>
</html>

图片 21

Paste_Image.png

2.水平垂直居中

- 如果将图片设置为背景图片,也可通过background-position:center的方式将图片设置成水品居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务8</title>
<style>
.div1 {
background:url(image/cat2.jpg) 0 0 no-repeat;
background-position:center top; /top意指图片在垂直方向上向上对齐,亦可取center或bottom/
width:100%;
height:700px;
border:1px solid #000;
background-color:#ccc;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

 ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-9c9bbadf350bc3a9.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)
###7.如何设置元素透明?兼容性?
可用```opacity```属性设定元素的透明度,```opacity```取值为1(完全不透明)到0(完全透明)之间。
兼容性见下图:
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-5c300e0cc0395f0b.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)
###8.```opacity```和 ```rgba```都能设置透明,有什么区别
当```opacity```属性的值应用于某个元素上时,是把这个元素(包括它的内容)当成一个整体看待,其子元素都会产生透明效果。
而```rgba```只是颜色的一个参数,并不会对其子元素产生影响。
举例:
- ```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>任务8</title>
    <style>
    .div1 {
        background-color:rgb(255,0,0);
        opacity:0.5;    
        height:100px;
        width:200px;
        }
    .div2 {
        background-color:rgba(255,0,0,0.5); 
        height:100px;
        width:200px;
    }
    </style>
</head>
<body>
<div class="div1">
    <h1>opacity</h1>
</div>
<div class="div2">
    <h1>rgba</h1>
</div>
</body>
</html>

效果:

图片 22

Paste_Image.png


本教程版权归本人及饥人谷所有,转载请注明来源。

2.1已知宽度高度的垂直水平居中

CSS

/*已知高度和宽度的水平垂直居中*/ #body-div{ position:relative; } #body-div-container{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; }

1
2
3
4
5
6
7
8
9
10
11
12
/*已知高度和宽度的水平垂直居中*/
        #body-div{
            position:relative;
        }
        #body-div-container{
            width:100px;
            height:100px;
            position:absolute;
            top:50%;
            left:50%;
            margin:-50px 0 0 -50px;
        }
2.2未知宽度高度的垂直水平居中

CSS

/*未知高度和宽度的水平垂直居中*/ #body-div{ position:relative; } ##body-div-container{ position:absolute; margin:auto; top:0; right:0; bottom:0; left:0; }

1
2
3
4
5
6
7
8
9
10
11
12
/*未知高度和宽度的水平垂直居中*/
        #body-div{
            position:relative;
        }
        ##body-div-container{
            position:absolute;
            margin:auto;
            top:0;
            right:0;
            bottom:0;
            left:0;
        }
2.3当被居中的元素是inline或者是inline-block

CSS

#body-div{ display:table-cell; text-align:center; vertical-align:middle; } ##body-div-container{ }

1
2
3
4
5
6
7
8
#body-div{
            display:table-cell;
            text-align:center;
            vertical-align:middle;
        }
        ##body-div-container{
 
        }

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 23 图片 24

1 赞 13 收藏 4 评论

关于作者:zhiqiang21

图片 25

做认为对的事情,如果可能是错的,那就做认为自己承受得起的事情! 个人主页 · 我的文章 · 11 ·      

图片 26

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:为什么你写的,div垂直居中的N种方法