一、水平居中
<div class="parent">
<div class="child"></div>
</div>
1. 行内元素水平居中
text-align: center可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。
.parent{
text-align:center;
}
.child{
display:inline-block;
}
2.块级元素的水平居中
①将该块级元素左右外边距margin-left和margin-right设置为auto
.child{
width:100px;//确保该块级元素定宽
margin:0 auto;
}
②使用table+margin
display:table在表现上类似block元素，但是宽度为内容宽。
.child{
display:table;
margin:0 auto;
}
③使用absolute+transform
.child{
position:absolute;
left:50%;
transform:translateX(-50%);
}
.parent{
position:relative;
}
④使用flex+justify-content
.parent{
display:flex;
justify-content:center;
}
⑤使用flex+margin
.parent{
display:flex;
}
.child{
margin:0 auto;
}
3.多块级元素水平居中
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
①利用flex布局
.parent{
display:flex;
justify-content:center;
}
②利用inline-block
.parent{
text-align:center;
}
.child{
display:inline-block;
}
4.浮动元素水平居中
①定宽的非浮动元素
通过子元素设置relative + 负margin
.parent{
width:500px;
}
.child{
position:relative;
left:50%;
margin-left:-250px;
}
②不定宽的浮动元素
.parent{
float:left;
position:relative;
left:50%;
}
.child{
float:left;
position:relative;
right:50%;
}
③利用flex布局
.parent{
display:flex;
justify-content:center;
}
.chlid{
float:left;
}
5.绝对定位元素水平居中
.parent{
position:relative;
}
.child{
position:absolute;/*绝对定位*/
width:200px;
height:100px;
margin:0auto;/*水平居中*/
left:0;/*此处不能省略，且为0*/
right:0;/*此处不能省略，且为0*/
}
二、垂直居中
1.单行内联元素垂直居中
.parent{
height:120px;
line-height:120px;
}
2.多行内联元素垂直居中
①利用flex布局（flex）
利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题
.parent{
height:140px;
display:flex;
flex-direction:column;
justify-content:center;
}
②利用表布局
利用表布局的vertical-align: middle可以实现子元素的垂直居中
.parent{
display:table;
height:140px;
}
.child{
display:table-cell;
vertical-align:middle;
}
3.块级元素垂直居中
①使用absolute+负margin(已知高度)
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
height:100px;
margin-top:-50px;
}
②使用absolute+transform(未知高度)
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
transform:translateY(-50%);
}
③使用flex+align-items
.parent{
display:flex;
align-items:center;
}
④使用table-cell+vertical-align
通过将父元素转化为一个表格单元格显示（类似<td>和<th>），再通过设置vertical-align属性，使表格单元格内容垂直居中
.parent{
display:table-cell;
vertical-align:middle;
}
三、水平垂直居中
1.绝对定位与负边距实现（已知高度宽度， 假设宽高100px ）
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}
2.绝对定位与margin:auto（已知高度宽度， 假设宽高100px ）
.parent{
position:relative;
height:100px;//必须有个高度
}
.child{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;//注意此处的写法
}
3.绝对定位+CSS3(未知元素的高宽，常用)
.parent{
position:relative;
}
.child {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
4.flex布局
.parent{
height:100vh;//必须有高度
display:flex;
justify-content:center;//水平居中
align-items:center;//垂直居中
}
5.flex/grid与margin:auto(最简单写法)
.parent {
height: 100vh;//必须有高度
display: grid;
}
.child {
margin: auto;
}
网友评论