div中的元素垂直居中

弱水三千只取一瓢饮

已于 2022-06-27 17:22:21 修改

阅读量101

点赞数

分类专栏： js基础操作 CSS 文章标签： css css3 html

于 2022-06-27 16:33:06 首次发布

本文链接：https://blog.csdn.net/weixin_43965881/article/details/125486728

版权

js基础操作同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

本文介绍了使用CSS实现元素居中的两种方法。第一种利用flexbox，设置`.middle-footer`为 flex 容器，通过`justify-content`和`align-items`实现内容垂直和水平居中。第二种方法通过`.div_footer`的`text-align:center`配合`.div_footerdiv`的相对定位和`top`属性，使内容在页面中居中显示。

摘要由CSDN通过智能技术生成

废话部多说，直接上代码

第一种方法

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>