水平垂直居中是前端的痛,也是前端__永恒__话题,这次记录两个用display:flex
实现的方法:
第一种:
<div class="flex">
<p>内容</p>
</div>
.flex{
display:flex;
width:600px;
height:600px;
background-color:#ff9900;
}
.flex p{
margin:auto;
/* 修饰作用 */
background-color: #000000;
padding:20px;
color:#fff;
font-size:40px;
font-weight:700;
}
https://codepen.io/ghostcode/pen/WNxJdNN
第二种:
<div class="flex">
<p>内容</p>
</div>
.flex{
display:flex;
align-items:center;
justify-content:center;
width:600px;
height:600px;
background-color:#333;
}
.flex{
display:flex;
align-items:center;
justify-content:center;
width:600px;
height:600px;
background-color:#ff9900;
}
.flex p{
/* 修饰作用 */
background-color: #000000;
padding:20px;
color:#fff;
font-size:40px;
font-weight:700;
}
666