css实现⽂字或者div盒⼦⽔平垂直居中的⽅法实现⽔平垂直居中的⽅法
⽂本（⽂字）内容属于⾏内元素
⾏内元素⽔平垂直居中⽅法
⽅式⼀：
设置⽂字外层的盒⼦
text-align:center /*⽔平居中*/
height = 100px;  /*垂直居中  */
line-height = 100px;
垂直居中只要保证⾏⾼和盒⼦⾼度⼀致即可
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>⾏⾼居中</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
text-align:center;
background-color: red;
line-height: 200px;
}
</style>
</head>
<body>
<div class="box">
hello
</div>
</body>
</html>
⽅式⼆：转换成单元格
将⽂字所在的盒⼦display设置成table-cell
text-align:center ⽔平居中
display:table-cell; 垂直居中
vertical-align:middle;
注意：只有单元格元素才拥有vertical-align属性
代码如下：
<title>垂直居中</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
text-align:center;
background-color: red;
display: table-cell;
vertical-align: middle;
}
/*附：单元格居中⽅法*/
td{
width: 200px;
height: 200px;
background-color: green;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
hello
</div>
<table>
<tr><td>123</td></tr>
</table>
</body>
</html>
块级元素⽔平居中⽅法
margin:0 auto;
只能设置⽔平居中，⽽margin:auto 0 不能设置垂直居中，因为margin垂直塌陷问题⽅法⼀：定位+margin
⽗级元素设置position:relative;
⼉⼦元素设置
width: 100px;
height: 100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-right:-50px;
只要margin-left为⾼度的⼀半，margin-right为宽度的⼀半即可
代码如下：
<title>定位和margin法盒⼦居中</title>
<style type="text/css">
.one{
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.two{
width: 100px;
height: 100px;
background-color: green;
/*给这个盒⼦定位⽔平垂直居中*/
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
/*设置盒⼦内⽂字⽔平，垂直居中*/
text-align:center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="one">
<div class="two"><span>你好</span></div>
</div>
</body>
</html>
⽅式⼆：定位⽅法
⽗级元素设置position:relative;
⼉⼦元素设置
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
这样设置以后，浏览器将⾃动将上下外边距相同，左右外边距相同，达到垂直居中的效果代码如下：
<style type="text/css">
.big{
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.small{
width: 50px;
height: 50px;
background-color: green;
position: absolute;
margin:auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="big">
<div class="small"></div>
</div>
</body>
</html>
⽅式三：单元格⽅法
利⽤单元格法
⽗级元素
display:table-cell;
text-align:center;
vertical-align:middle;
⼦元素
display:inline-table
因为text-align只对⾏内元素和⾏内块⽣效代码如下：
<style type="text/css">
td{
width: 200px;
height: 200px;
background-color: red;  text-align: center;
vertical-align: middle;
}
span{
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
background-color: yellow;  }
div.big{
width: 200px;
height: 200px;
background-color:purple;
display: table-cell;
vertical-align: middle;
text-align: center;
}
div.small{
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
background-color: yellow;        }
</style>
</head>
<body>
<table>
<div class="big">
<div class="small">
⼩盒⼦
</div>
</div>
<tr>
<td>text align center
<span>123</span>
</td>
</tr>
</table>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。