<span>投资⾦额</span>
<span>美通卡奖励</span>
</h3>
h3{
width:100%;
height: 0.8rem;
/* line-height: 0.85rem; */
display: flex;
align-items: center;
justify-content: space-between; }
⼀、定位+负边距
html部分
<body>
<div class="box"></div>
</body>
css部分
.box{
position:absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-100px;
padding:20px;
width:300px;
height:200px;
background:#41D7FB;
}
特点
兼容性较好，能够兼容到IE6
元素的宽⾼需要固定
flex布局对齐方式⽐较经典的垂直居中实现⽅式⼆、定位+⾃适应边距
html部分
<body>
<div class="box"></div>
</body>
css部分
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
padding:20px;
width:300px;
height:200px;
background:#41D7FB;
}
特点
兼容IE8以及以上浏览器
元素宽⾼不需固定，可以随内容适应
三、定位+CSS3位移
html部分
<body>
<div class="box"></div>
</body>
css部分
.box{
position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
padding:20px;
width:300px;
height:200px;
background:#41D7FB;
}
特点
由于使⽤了CSS3中的transform属性，需要IE9+浏览器元素宽⾼不需固定，可以随内容适应
四、Flex布局实现
html部分
<body>
<div class="box"></div>
</body>
css部分
display: flex;
height: 100%;
justify-content: center;
align-items:center;
}
.box{
padding:20px;
width:300px;
height:200px;
background:#41D7FB;
}
特点
简单直接
兼容性较差，需要IE10+
⽗元素⾼度需要指定
元素的宽⾼可以随内容适应五、table-cell配合inline-block html部分
<body>
<div class="table">
<div class="table-row">
<div class="table-cell">
<div class="box"></div>
</div>
</div>
</div>
</body>
css部分
.table{
display:table;
width:100%;
height:600px;
}
.table-row{
display: table-row;
}
.table-cell{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box{
display: inline-block;
padding:20px;
width:300px;
height:200px;
background:#41D7FB;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。