元素水平垂直居中解决方案
2020-11-20 13:59:12 2 举报AI智能生成
css元素水平垂直居中解决方案大全
作者其他创作
大纲/内容
水平居中
行内元素
给父元素设定text-align:center
块级元素
宽度已知
margin
margin: 0 auto
子元素相对父元素绝对定位，top:0; left:0;right:0;bottom:0;margin: 0 auto;
子元素相对父元素绝对定位，left: 50%;margin-left: -width/2
宽度未知(已知也可)
display: table; margin:0 auto;
子元素相对父元素绝对定位, left:50%;transfrom:translateX(-50%)
flex布局
父元素text-align:center;子元素display:inline-block;
垂直居中
纯文本内容居中
设置父元素的line-height等于其height
子元素相对父元素绝对定位，margin: auto 0;top:0;left:0;right:0;bottom:0;
子元素相对父元素绝对定位，top: 50%;margin-top: -height/2
子元素相对父元素绝对定位, top:50%;transfrom:translateY(-50%)
flex布局
父元素display:table，子元素display:table-cell;vertical-align:middle
水平垂直居中
文本or图片
父元素:line-height;text-align:center;
定高定宽
子元素相对父元素绝对定位, left:50%;top:50%;margin-left:-width;margin-top:-height;
子元素相对父元素绝对定位, left:50%;top：50%；transfrom:translate(-50%， -50%)
子元素相对父元素绝对定位, margin:auto;top:0;left:0;right:0;bottom:0;
flex布局
父元素display:table-cell;text-align:center;vertical-align:middle;子元素:display:inline-block;
收藏
0 条评论
下一页
为你推荐
查看更多
