web前端图片垂直居中
时间: 2023-12-23 15:27:34 浏览: 140
以下是两种实现web前端图片垂直居中的方法:
1. 使用display: table-cell和vertical-align: middle属性
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<img src="http://img.hb.aicdn.com/844cc8626177f5429032aae7e5f42d0aa05b57a23437-8MCz1J_fw658" alt="">
</div>
</body>
</html>
```
2. 使用padding和text-align属性
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.ct {
padding: 50px 0px;
text-align: center;
background: #eee;
}
</style>
</head>
<body>
<div class="ct">
<p>padding设置居中</p>
<p>padding设置居中</p>
</div>
</body>
</html>
```
阅读全文