<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css将内容水平垂直居中</title>
<style type="text/css">
*{margin:0;padding:0;box-sizing:border-box;font: 16px/20px 'Microsoft yahei,微软雅黑'}/*box-sizing:border-box设置元素的宽度包含padding和border*/
.all {
width: 500px;
margin: 0 auto;
}
.container {
width: 300px;
height: 600px;
min-height: 6.5em;/*em是相对于字体来计算的,这里1em=16px,6.5em=6.5*16px=104px*/
display: table-cell;
vertical-align: middle;
border: 1px solid springgreen;
text-align: center;
}
</style>
</head>
<body>
<div class="all">
<div class="container">
66666666666677777<br>
66666666666666666<br>
88888888888888888<br>
99999999999999999<br>
10101010101010101<br>
21212121212121212<br>
</div>
<div class="container">
<img src="http://img0.bdstatic.com/img/image/2043d07892fc42f2350bebb36c4b72ce1409212020.jpg" width="250px" height="350px">
</div>
</div>
</body>
</html>
css将文字和图片水平垂直居中
最新推荐文章于 2023-08-25 14:28:52 发布