一.水平居中
1.单个元素水平居中
.box {
display: flex;
justify-content: center; /*水平居中*/
}
2.多个h1元素水平居中
flex弹性布局justify-content属性实现元素水平居中
flex弹性布局justify-content属性实现元素水平居中
flex弹性布局justify-content属性实现元素水平居中
css
.box {
display: flex;
justify-content: center;
width: 100%;
background: #0099cc
}
h1 {
font-size: 1rem;
padding: 1rem;
border: 1px dashed #FFF;
color: #FFF;
font-weight: normal;
}
效果图
二.垂直居中
1.单个h1标签垂直居中
.box {
display: flex;
align-items:center; /*垂直居中*/
}
2.多个h1标签并排垂直居中
Document
.box {
display: flex;
width: 980px;
height: 30rem;
align-items: center;
background: #6161d1
}
h1 {
font-size: 1rem;
padding: 1rem;
border: 1px dashed#FFF;
color: #FFF
}
flex弹性布局justify-content属性实现元素垂直居中
flex弹性布局justify-content属性实现元素垂直居中
flex弹性布局justify-content属性实现元素垂直居中
总结:
常用代码:
display: flex;
align-items: center; /*垂直居中*/
justify-content:center; /*水平居中*/