水平居中 text-align:center:
块级元素水平居中-采取绝对定位方式:
{
.center{
width:960px;
position:absolute;
left:50%;
margin-left:-480px;
}
}
自适应块级元素水平居中
借助css3的变形属性 transfor 来完成
.content{
position:absolute;
left:50%;
transform:translateX(-50%);
}
行内元素垂直居中:
*单行文本的垂直居中:
1.元素的宽度和行高相等时,文本呈现垂直居中
*多行文本的垂直居中:
1.不固定高度的垂直居中
通过设置padding
2.固定高度的垂直居中
使用display设置为table,配合样式
vertical-align设置为middle来实现
块级元素的垂直居中:
*固定宽高的垂直居中:
- .content{
width:100px;
heigth:100px;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
}
*不固定宽高的垂直居中
- .content{
position:absolute;
left:50%;
top:50%;
左/上边缘向左/上移动自身宽/高度的一半
transform:translate(-50%,-50%);
}
基于flex实现垂直居中
移动端中最佳的解决方案
.contert{
转为flex弹性盒子布局
display:flex;
主轴上的对齐方式为居中
justify-content:center;
交叉轴上对齐方式为居中
align-items:center;
}