css实现垂直居中方法
2017-09-28 本文已影响8人
另一只小白
1、如果是单行文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
width: 500px;
height: 500px;
background: gray;
}
#wrapper p{
line-height: 500px; //行高=父级的height，垂直居中。
text-align: center; //水平居中
}
</style>
</head>
<body>
<div id="wrapper">
<p>这是一段要垂直水平居中的文字！</p>
</div>
</body>
</html>
效果如图：
说明：适用于单行文本，多行就不可以了！
2、对于已知高度的块级元素，可以采用绝对定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
position: relative; //父级
width: 500px;
height: 500px;
background: gray;
}
#wrapper p{
position: absolute; //子级用绝对定位
top:50%; //先定位到50%的位置
left: 50%;
height: 300px; //已知的高度
width: 300px;
margin-top: -150px; //往上提本身高度的一半
margin-left: -150px;
}
</style>
</head>
<body>
<div id="wrapper">
<p>这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！</p>
</div>
</body>
</html>
效果如下：
适用：绝对定位为页面布局没有影响的情况下可以使用，并且子级的高度是已知的。
3、对于已知子级元素的高度，而且不能用绝对定位来布局的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
background: gray;
width: 500px;
height: 500px;
text-align: center;
overflow: hidden;
}
#null{
width: 100%;
height: 50%;
background: yellow;
}
#content {
height: 100px;
margin: -50px 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="null"></div>
<div id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~
</div>
</div>
</body>
</html>
效果如下：
适用：对于绝对布局有影响，不能适用position:absolute的元素，可以用以上这种方法，思路是：用一个块级元素，设置已知大小，在让其高度达到父级容器的一半大小，再把要居中的元素往上提半个高度。跟方法2同理。
4、垂直居中一张图片（行内元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
width: 600px;
height: 600px;
background: gray;
text-align: center;
}
#wrapper img{
vertical-align: middle;
width: 400px;
height: auto;
}
#wrapper #block{
background: blue;
line-height: 600px;//跟父级一样高
//这样的效果是一样的，记得哦，在这里不可以用line-height:100%这样来设置行高
}
</style>
</head>
<body>
<div id="wrapper">
<span id="block"></span>
</div>
</body>
</html>
效果如图：
这里的多了一个空的<span>（行内元素都可以代替）标签，为什么要这样的，首先，要搞清楚vertical-align这个属性的特点，它是相对兄弟级行高（line-height）来定位，它是相对兄弟级行高（line-height）来定位，它是相对兄弟级行高（line-height）来定位（重要事情说三遍），并且他仅对行内元素有效，所以，在要定位的元素后面加多一个行内元素来撑开父级的行高，以此来居中。如果<img>标签记得把后面img的src=""这个空属性去掉，不然会留下一个空白框。
适用：通用行内元素。
5、绝对定位居中法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
position: relative;
background: gray;
width: 600px;
height: 600px;
}
#content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
}
img {
width: 400px;
height: auto;
}
</style>
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
效果如图：
文章出处后续继续补充
