方法
-
已知盒子大小:
a. 子盒子:定位+margin(position: absolute; left:50%; top:50%; margin-top:-盒子高度一半px;margin-left:-盒子宽度一半px)水平居中margin: 0 auto;也可以;
b.子盒子:定位:positon: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; -
未知盒子大小:定位+transform (left:50%;top:50%;transform: translate(-50%,-50%))
-
flex布局: 父盒子 display:flex; just-content: center; aligin-items: center; (css英文可能有误)
-
父盒子:display: table-ceil; text-align: center; vertical-align: middle;
-
使用js获取到盒子的宽高,按照方法1设置 定位+margin
示例
- transform方式
<div class="c-layer">
<div class="font">这里是文案</div>
</div>
.c-layer {
width: 200px;
height: 200px;
background-color: aquamarine;
position: relative;
}
.font {
position: absolute;
background-color: brown;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}