水平居中的几种方式

最新推荐文章于 2023-10-26 15:59:50 发布

凌-志

最新推荐文章于 2023-10-26 15:59:50 发布

阅读量537

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/yanlzhl/article/details/54090265

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

方式一：水平居中：给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