css将文字和图片水平垂直居中

<!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将文字和图片水平垂直居中)