设置页面元素垂直居中的方法

最新推荐文章于 2024-01-22 10:24:00 发布

Master.Yuan

最新推荐文章于 2024-01-22 10:24:00 发布

阅读量476

点赞数

分类专栏： css样式文章标签： css html html5

本文链接：https://blog.csdn.net/yuanwen52/article/details/105692557

版权

css样式专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了三种使用CSS实现子元素在父元素内水平垂直居中的方法：第一种利用绝对定位和margin:auto，第二种通过计算margin值，第三种采用transform:translate(-50%,-50%)实现。

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

第一种方法（适用于已知或未知子元素的宽和高）：

设置父元素为的position为relative；设置子元素的position为absolute;然后将子元素的top、right、bottom、left都设置为0，且margin设置为auto;

示例代码：

<div style="position: relative;width: 200px;height: 200px;border: 1px solid black;">
    <div style="position: absolute;width: 100px;height: 100px;border: 1px solid red;top: 0;bottom: 0;left:0;right:0;margin: auto;">
    </div>
</div>

效果图：

第二中方法（当已知子元素的宽和高时）：

将父元素的position设置为：relative；子元素的position设置为：absolute；left:50%;top:50%;margin:-子元素高的一半 0px 0px -子元素宽的一半

示例代码：

<div style="position: relative;width: 200px;height: 200px;border: 1px solid black;">
    <div style="position: absolute;width: 80px;height: 60px;border: 1px solid red;top: 50%;left:50%;margin:-30px 0 0 -40px;">
    </div>
</div>

效果图：

第三种方法使用transform:translate(-50%,-50%);

示例代码：

<div style="position: relative;width: 200px;height: 200px;border: 1px solid black;">
    <div style="position: absolute;width: 80px;height: 60px;border: 1px solid red;top: 50%;left:50%;transform:translate(-50%,-50%);">
    </div>
</div>

效果图：