怎么让span在div中垂直居中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么让span在div中垂直居中相关的知识，希望对你有一定的参考价值。
1、首先打开hbuilder软件，新建一盒html文件，写入一个外围的div容器标签，div中设置一个span标签：
2、然后在上方设置style标签，在里面设置div的字体，高度和宽度以及背景颜色的属性，同时设置div的display属性为table-cell，将它设置为表格元素，然后设置纵向对齐方式vertical-align属性为中间居中，在span标签中不设置高度和宽度就可以垂直居中了：
3、最后打开浏览器就可看到垂直居中的效果了：
<html>
<head>
<style>
div
width:200px;
height:200px;
position:relative;
background:blue;
#span
margin:auto auto;
display:block;
width:100px;
height:100px;
background:orange;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
</style>
</head>
<body>
<div>
<span id='span'>
</span>
</div>
</body>
</html>
当span用margin:auto auto(水平垂直自动居中)是，只有水平方向上的居中，垂直方向的却没有。这是因为块元素的特性，块元素是独占一行的，所以说整行都是它的范围，如果不设置宽度，块元素就会自己填充满整行。而此时设置了宽度（小于100%）时，它就有剩余的（除宽度以外部分）宽度可以自己来分配，自己计算居中。
而不设高度时，块元素是不会自动填充的，所以它是没有高度来计算居中的。用绝对定位（父级要相对）来把块元素的宽高拉到边角点，整个上下左右都是它的范围。再通过设置宽高，这时就有剩余的宽高来居中了。
本回答被提问者采纳如何让DIV里面的DIV水平垂直居中
让DIV里面的DIV水平垂直居中有2种方法：方法一：
让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。
.mydiv
margin:0 auto;
width:300px;
height:200px;
方法二：
要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。
.mydiv
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px
该方法使用普遍，但是前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的，比方说需要弹出一个DIV层并且要居中显示，DIV的内容是动态的，所以宽度和高度也是动态的，这时需要用jQuery可以解决居中。 参考技术A div实现水平居中只需要设置固定宽度和margin:0 auto即可，
给你2个解决方案:
1、条件是div的高度和宽度是固定的
<style type="text/css">
<!--
div1
position:relative;
width:600px;
height:500px;
border:1px solid #008800;
div2
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
-->
</style>
<div class="div1">
<div class="div2">让层垂直居中</div>
</div>
其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于父级层的样式编写。
2、条件是div的高度和宽度是不固定的
如果div宽度不固定，那用div就有点困难了，虽然用js获取当前高宽再附加css可以解决，但是要用到js来解决问题就有点逊了；
我给你一个思路，你不妨试试table布局，table不设置宽度的情况下默认是宽度和高度都是最小化的，这样给table设置margin:0 auto就可以让这个table水平方向居中；
解决了水平居中，那就来解决垂直居中，td中的内容默认是垂直居中的，那么只要两者互相嵌套一下不就解决水平垂直居中了!
但是有一个问题，你所需要垂直居中的父级table的高度是否固定，如果父级高度固定，那么子级高度不固定也一样可以垂直居中本回答被提问者和网友采纳
以上是关于怎么让span在div中垂直居中的主要内容，如果未能解决你的问题，请参考以下文章