美文网首页
2020-09-07

2020-09-07

作者: liuyan55 | 来源:发表于2020-09-07 10:14 被阅读0次

               子元素如何居中的几种方法

1. 已知盒子大小:

1) 子盒子:定位+margin(position: absolute; left:50%; top:50%; margin-top:-盒子高度一半px;margin-left:-盒子宽度一半px)

水平居中margin: 0 auto;也可以

2) 子盒子:定位:positon: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;

2. 未知盒子大小:定位+transform (left:50%;top:50%;transform: translate(-50%,-50%))

3. flex布局: 父盒子 display:flex; just-content: center; aligin-items: center; (css英文可能有误)

4. 父盒子:display: table-ceil; text-align: center; vertical-align: middle;

5. 使用js获取到盒子的宽高,按照方法1设置 定位+margin

相关文章

网友评论

      本文标题:2020-09-07

      本文链接:https://www.haomeiwen.com/subject/ppskektx.html