常见居中方式（水平居中——垂直居中）

最新推荐文章于 2020-06-08 19:03:43 发布

佳多多

最新推荐文章于 2020-06-08 19:03:43 发布

阅读量388

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_35661041/article/details/89678350

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.水平居中：
1）子元素：margin : 0 auto
2）使用绝对定位：父元素：position:relative;
子元素：position:absolute;
left:50%;
transform:translateX(-50%);
3）父元素：text-align:center;
子元素：display:inline-block;
2.垂直居中：
1）父元素：display:table-cell;vertical-align:middle;
2）使用绝对定位：父元素：position:relative;
子元素：position:absolute;
top:50%;
transform:translateY(-50%);
3) 使用相对定位；