您好,欢迎访问本站博客!联系QQ:1343013953
  • 四象限时间管理法则:①重要且紧急的事;②重要但不紧急的事;③不重要但紧急的事;④不重要且不紧急的事

两个大Div里面的两个左右结构的小Div垂直居中

CSS/Script wujinhua 2018-04-04 632 次浏览 0个评论
网站分享代码
<!DOCTYPE html>
<html>
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>垂直居中</title>
 <style type="text/css">
        .main{
            width: 500px;
            border:solid 2px #ccc;
            display: flex;
            flex-direction: row;
            align-items: center; /*垂直居中*/
            justify-content: center; /*水平居中*/
        }
        .right{
            width: 200px;
            height: 300px;
            vertical-align: middle;
            align-items: center;
            background:#000000;
        }
        .left{
            flex: 1;
            padding-left: 50px;
            background:red;
            width:200px;
            height:100px;
        }
    </style>  
  </head>
    <body>
<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>
  </body>
</html>


已有 632 位网友参与,快来吐槽:

发表评论

歌曲 - 歌手
0:00

站点统计