CSS元素水平居中常用的几种方法

最新推荐文章于 2023-11-24 18:39:44 发布

猫小叔

最新推荐文章于 2023-11-24 18:39:44 发布

阅读量503

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识点文章标签：元素居中 css

本文链接：https://blog.youkuaiyun.com/tt_Litingting/article/details/72716608

前端知识点专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在CSS中实现元素水平居中及水平垂直居中的多种方法，包括使用margin、position属性和transform等，适用于不同场景的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#CSS 元素水平居中

元素居中的问题我们也会经常遇到，在这里总结一下经常用的几种居中方法。
1：水平居中

 div{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 0 auto;
        }

运行结果如下：
margin 设置了左右的值是auto，那么这个div将被水平居中

2：水平垂直居中
实现如下效果，即图片是水平和垂直方向都居中，有三种经常使用的方法：
这里写图片描述
①：水平垂直居中一

position: absolute;
            width: 90px;
            height: 80px;
            margin:auto;
            left:0;
            top: 0;
            right: 0;
            bottom: 0;

这种方法经常使用，也不会出现什么大的问题。
②：利用负边距

position: absolute;
            width: 90px;
            height: 80px;
            top: 50%;
            left: 50%;
            margin: -40px 0 0 -45px;//margin-top是高度的一半，margin-left是宽度的一半，都是负边距

这种方法兼容性不错，但是需要提前知道此元素的尺寸
③：使用transform

 position: absolute;
            width: 90px;
            height: 80px;
            top: 50%;
            left: 50%;
           transform: translate(-50%,-50%);

不需要提前知道元素的尺寸，支持IE 10+以上的浏览器。

以上便是经常用到的用于居中元素的方法。