居中的方法

元素内容水平居中
text-align: center;
块级元素水平居中
margin:0 auto;
一行文字垂直居中
行内元素先变成行内块
display:inline-block;
然后line-height和height设置一样高
多行内容垂直居中
用margin(写在子元素上)或padding（写在父元素上）
子元素在父元素中水平垂直居中
1）子元素宽高已知
1用margin和padding，用法同上
2弹性盒模型{
display：flex;
justify-content:center;(水平居中)
align-items:center;（垂直居中）
}
3绝对定位
子绝父相
父元素position：relative;
子元素：{position：absolute；
top:50%;
left:50%;
margin-top:-子元素高度一半
margin-left:-子元素宽度一半
}
4表格法
父元素{display:table-cell;
text-align:center；
vertical-aligh:center;
}
子元素{display:inline-block;}
5transform
子元素transform:translate()计算该移动的距离
2）子元素宽高未知
1弹性盒法
父元素{
display：flex;
justify-content:center;(水平居中)
align-items:center;（垂直居中）
}
2绝对定位加transform
父元素position：relative;
子元素：{position：absolute；
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

猜你喜欢