

首页  思维导图  详情



元素水平垂直居中解决方案

2020-11-20 13:59:12   2  举报





AI智能生成

css元素水平垂直居中解决方案大全

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;

 Collect

Get Started

品类解决方案

 Collect

Get Started

副本重叠站位解决方案

 Collect

Get Started

美食城解决方案

 Collect

Get Started

解决方案





0 条评论

下一页