废话部多说,直接上代码
第一种方法
css样式
.middle-footer {
height: 100px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.middle-footer-bootm {
border: 1px solid red;
text-align: center;
}
html代码
<div class="middle-footer">
<div class="middle-footer-bootm">
<span>copyright</span><br />
<span>ALL Rights Reserved</span>
</div>
</div>
效果图
第二种方法
css样式
.div_footer {
width: 100%;
height: 25%;
background-color: rgba(255,255,255,1);
text-align: center;
}
.div_footer div {
margin: 0 auto; /*水平居中*/
position: relative; /*脱离文档流*/
top: 25%; /*偏移*/
}
.div_footer font {
font-family: MicrosoftYaHei;
font-size: 12px;
width: 334px;
color: #8E8E8E;
}
html代码
<div class="div_footer">
<font>copyright@5442020-2025 www.baidu.com</font><br />
<font>ALL Rights Reserved 备案号54654513465465号</font>
</div>
</div>
效果图