CSS实现水平垂直居中的几种方式

最新推荐文章于 2023-09-30 13:11:25 发布

树旅小爷

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量3.7k

点赞数 4

分类专栏：前端

本文链接：https://blog.csdn.net/milk_tiger/article/details/109047308

版权

本文介绍了CSS实现元素水平垂直居中的多种方法，包括使用margin自动填充、绝对定位结合负margin、transform、calc以及flex和grid布局。特别强调了绝对定位时的副作用和固定宽高的需求，以及flex和grid布局的便捷性。

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

1.最简单

margin: 0 auto
line-height等于height

.outer {
   
            width: 200px;
            padding: 200px;
            background-color: pink;
        }
       
.inner {
   
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 0 auto;
            line-height: 100px;
            text-align: center;
        }