垂直居中的方法
2017-10-24 本文已影响0人
饥人谷_小侯
1.正常情况下的垂直居中
- 适用情况：该父元素的宽度固定，高度随着内部元素增多而撑开，增加子元素内容撑开父元素的高度以后依然居中。
- 方法：将上下padding设置为相等。
- 举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="ct">
<p>你好你好你好</p>
<p>你好你好你好</p>
</div>
</body>
</html>
.ct{
padding: 45px 0;
text-align: center;
background: #eee;
}
以上面的方法可以设置两个段落在页面中垂直居中。
2. 通过绝对定位来设置垂直居中
- 适用情况：当该元素的宽度高度固定时设置的垂直居中。
- 方法：设置元素定位方式为绝对定位，设置位置为向下百分之五十，向右百分之五十，然后再设置负外边距分别为宽度和高度的一半。
- 举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="dialog">
<div class="header">我是标题</div>
<div class="content">我是内容</div>
</div>
</body>
</html>
.dialog {
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
width: 400px;
height: 300px;
box-shadow: 0px 0px 3px #000;
}
.dialog .header{
padding: 10px;
background: #000;
color: #fff;
}
.dialog .content{
padding: 10px;
}
3.通过绝对定位和translate来设置垂直居中
- 设置情况：当该元素的宽高都不确定时，且要求该元素永远水平居中与浏览器界面时，CSS3属性要注意兼容性。
- 方法：设置元素定位方式为绝对定位，设置位置为向下百分之五十，向右百分之五十，然后设置transform：translate(-50%, -50%)；
- 例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="css">
<p>你好你好你好</p>
</div>
</body>
</html>
p {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: yellow;
}
4.使用vertical-align实现居中
- 使用场景：只能用于行内元素和表格中的元素居中。
- 方法：在行内元素前设置一个与父元素等高的无内容inline-block元素，然后设置两者对齐方式都为中心线对齐。
- 例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
.box{
width: 300px;
height: 200px;
border: 1px solid ;
text-align: center;
}
.box:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box img{
vertical-align: middle;
background: blue;
}
5.通过table-cell实现居中
- 使用场景：改变父元素的display不会产生影响的时候。
- 方法：设置父元素的display：table-cell；vertical-align: middle;
- 例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
.box{
width: 300px;
height: 200px;
border: 1px solid ;
text-align: center;
}
.box:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box img{
vertical-align: middle;
background: blue;
}
6.直接通过table标签来设置绝对居中
方法：
<table>
<tr>
<td>
<div></div>
</td>
</tr>
</table>
上面例子中的div默认就是绝对居中的
7.通过flex布局来设置绝对居中
使用场景：可以兼容CSS3的情况下。
方法：使用flex布局，在父元素中添加如下代码：
display:flex;
justify-content: center;
align-items: center;
