实现水平居中的几种方法
1. 针对块级元素
margin : 0 auto;
2. 针对行内元素
text-align : center //给父级设置
3. 绝对定位position:absolute
<div class="parent">
<div class="children"></div>
</div>
.parent{
background: pink;
text-align: center;
position: relative;
height: 50px;
}
.children{
background: yellow;
position: absolute;
height: 50px;
width: 50px;
left:50%;
// 或margin-left:-(自身宽度的一半)
transform: translateX(-50%); // CSS3
}
4. flex布局 主轴方向 justify-content: center
在flex容器设置
方便但是兼容差 (支持IE10+)
.parent{
display: flex;
background: pink;
height: 200px;
//align-items: center; 交叉轴方向上居中
justify-content: center ;
}
.children{
height: 50px;
width: 50px;
background: yellow;
border: 1px solid #000;
}
实现垂直居中的几种方法
1. 绝对定位position:absolute
和水平居中一样,只是方向不同
.children{
top:50%;
transform: translateY(-50%); // 或margin-top:-(自身高度的一半)
}
2. flex 交叉轴方向 align-items: center
在flex容器设置
.parent{
display: flex;
background: pink;
height: 200px;
align-items: center ;
}
3. 实现文字的垂直居中line-hight
行高与元素高度相同,则该元素内文字就垂直居中了。
4.所有子级设置 vertical-align : middle
子级并不是根据父级进行居中,只会以同级最高子元素的中心作为中线进行居中对齐。
因此,最高子元素与父级同高时,其他子元素就相对父级垂直居中了。
(可以把最高元素width设置为0,来隐藏该最高子元素)
<div class="parent">
<img class="children"></img>
<img class="children2"></img>
</div>
.parent{
backgroud: pink;
}
.children{
height: 50px;
width: 50px;
vertical-align: middle;
backgroud: green;
}
.children2{
height: 200px;
width: 0;
vertical-align:middle
}
5.父级display:table-cell
再设置vertical-align:center
此时子级会相对父级垂直居中
<div class="div1">
<div class="div2"></div>
</div>
.div1{
height: 150px;
width: 500px;
background: pink;
display: table-cell;
vertical-align: middle;
}
.div2{
height: 50px;
width: 50px;
background: black;
}