css如何在flex布局中如何使用子元素水平垂直居中呢?


摘要:
下文讲述css代码在flex布局中使元素水平和垂直居中的方法分享,如下所示:

实现思路:
     只需在父容器中定义以下属性,即可实现子元素水平和垂直居中
        display: flex;
        justify-content: center;
        align-items: center;

例:
display:flex使元素水平和垂直居中的示例分享

  <meta charset='utf-8' />
<style>
  
.parent{
     display: flex;
     justify-content: center;
     align-items: center;
     
     width:120px;
     height:100px;
     background-color:green;
}

.child{
    width:50px;
    height:30px;
    background-color:white;
 }

</style>
<p>
maomao365.com <br />
display:flex布局中<br />
使子div在父div中水平和垂直都居中 
</p>
<hr />
<div class="parent">
  <div class="child"></div>
</div> 
css在flex布局中让子元素水平垂直都居中的示例分享

css在flex布局中让子元素水平垂直都居中的示例分享