元素水平垂直居中三种方法实现

最新推荐文章于 2022-10-22 08:34:57 发布

qq_35321405

最新推荐文章于 2022-10-22 08:34:57 发布

阅读量308

点赞数

分类专栏：前端小技巧

本文链接：https://blog.csdn.net/qq_35321405/article/details/80762896

版权

前端小技巧专栏收录该内容

23 篇文章 1 订阅

订阅专栏

一. 简介

实现一个元素水平垂直居中的效果。

二. 实现

<body>
<img class="center">
</body>

方法一：(此方法适合宽高固定的)

.center {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

方法二: (此方法适合宽高不固定的元素)

.center {
    position: absolute;
    left: 0;
    top: 0;
    margin: auto;
    right: 0;
    bottom: 0;
}

方法三：(宽高不固定的元素，此方法缺点就是只能适配到ie9+)

.center{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_35321405

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素水平垂直居中三种方法实现

一. 简介实现一个元素水平垂直居中的效果。二. 实现&lt;body&gt;&lt;div class="center"&gt;&lt;/div&gt;&lt;/body&gt;方法一：(此方法适合宽高固定的) .center { width: 200px; height: 200px; position: absolute; left: 50%; t...
复制链接

扫一扫