1.块级元素水平居中,水平元素垂直居中
<div class="wrap">
<div class="example1">
<p>CSS</p>
</div>
</div>
.example1 p {
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto; /*块级元素水平居中*/
line-height: 100px;/* 内联元素垂直居中*/
text-align: center; /* 内联元素水平居中 */
}
CodePen:CSS块级水平居中
2.块级元素垂直居中
<div class="wrap">
<div class="example2">
<p>CSS</p>
</div>
</div>
.wrap {
position: relative;
background-color: orange;
width: 300px;
height: 300px;
}
.example2 {
background-color: red;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
/*margin: -50px 0 0 -50px; 已知高度宽度*/
transform: translate(-50%,-50%);/*未知高度宽度*/
}
CodePen:CSS块级垂直居中
3.flex布局
<div class="wrap">
<div class="example3">
<p>CSS</p>
</div>
</div>
.wrap{
background-color: #ff8c00;
width: 200px;
height: 200px;
display: flex;
justify-content: center; /*使子项目水平居中*/
align-items: center; /*使子项目垂直居中*/
}
.example3 {
background-color: #f00;
width: 100px;
height: 100px;
}
CodePen:Flex布局
网友评论