div水平垂直居中
Posted lurenjia1994
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div水平垂直居中相关的知识，希望对你有一定的参考价值。
水平垂直居中
效果
<div class="m-box"> <div class="m-temp"> <div class="m-item">fsdafsfasdf</div> <div class="m-item">fsdafsfasdf</div> <div class="m-item">fsdafsfasdf</div> </div> </div>
css
.m-box{
background-color: #66fff7;
height: 300px;
width: 100%;
display: flex;
align-items: center;
}
.m-temp{
background-color: cornflowerblue;
margin-left: auto;
margin-right: auto;
}
.m-item{
margin: 10px;
padding: 10px;
background-color: white;
float: left;
}
水平居中
改m-temp如下
.m-temp{
background-color: cornflowerblue;
margin-left: auto;
margin-right: auto;
/*margin-top: auto;*/
margin-bottom: auto;
}
垂直居中
效果
改m-temp如下
.m-temp{ background-color: cornflowerblue; /*margin-left: auto;*/ /*margin-right: auto;*/ margin-top: auto; margin-bottom: auto; }
以上是关于div水平垂直居中的主要内容，如果未能解决你的问题，请参考以下文章