css、Flex布局实现⽔平居中与垂直居中的⽅法实现⽔平与垂直居中
⽔平居中
⾏内元素
text-align:center;
块级元素
定宽：可以采取决定定位的⽅式实现
.center {
width:960px;
position: absolute;
left:50%;
margin-left:-480px;
}
不定宽：借助css3的变形属性Transform来完成
.content {
position: absolute;
left:50%;
transform:translateX(-50%);
}
垂直居中
单⾏⽂本的⽔平垂直居中
元素的⾼度和⾏⾼相等时，⽂本呈现垂直居中  height == line-height  ⾼等于⾏⾼
多⾏⽂本的⽔平垂直居中
不固定⾼度的垂直居中css设置文字垂直居中
通过设置padding实现
固定⾼度的垂直居中
使⽤display设置为 table-cell，配合样式vertical-align设置为middle来实现table-cell：以表格单元格的形式来解析代码
块级元素⽔平垂直居中
固定宽⾼的⽔平垂直居中
.content {
width:100px;
height: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实现⽔平垂直居中
移动端开发中的最佳解绝⽅案
.content {
/*转为flex弹性盒布局*/
display: flex;
/*主轴上的对齐⽅式为居中*/
justify-content: center;
/*交叉轴上对齐⽅式为居中*/
align-items: center;
}
橘⼦很甜。@快乐养兔

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。