水平居中的几种方式

最新推荐文章于 2024-09-11 10:06:17 发布

原创最新推荐文章于 2024-09-11 10:06:17 发布 · 590 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了四种使用CSS实现元素居中的方法：通过margin属性水平居中；使用绝对定位结合margin属性实现水平垂直居中；利用position属性配合百分比和负外边距实现精确居中；采用transform属性进行未知容器宽高的元素居中。

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

方式一：水平居中：给div设置一个宽度，然后添加margin:0 auto属性

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

方式二：让绝对定位的div居中

div {
               position: absolute;
               width: 300px;
               height: 300px;
               margin: auto;
               top: 0;
               left: 0;
               bottom: 0;
               right: 0;
               background-color: pink;
           }

方式三：确定容器的宽高宽500px 高 300px 的层
设置层的外边距

div {
                position: absolute;
                width: 500px;
                height: 300px;
                top: 50%;
                left: 50%;
                margin: -150px 0 0 -250px;
                background-color: pink;
            }

方式四：未知容器的宽高，利用 `transform` 属性

div {
               position: absolute;
               width: 500px;
               height: 300px;
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);
               background-color: pink;
           }

以上经验和代码整理来至：https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers