元素水平垂直居中解决方案
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;
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
父元素display:table，子元素display:table-cell;vertical-align:middle
水平垂直居中
文本or图片
父元素:line-height;text-align:center;
定高定宽
父元素display:table-cell;text-align:center;vertical-align:middle;子元素:display:inline-block;
收藏
0 条评论
回复 删除
下一页
