css几种常见的水平垂直居中的方法！！！

最新推荐文章于 2024-06-03 18:53:48 发布

梧桐落叶~

最新推荐文章于 2024-06-03 18:53:48 发布

阅读量2.9k

点赞数

分类专栏：大前端文章标签： css垂直

本文链接：https://blog.csdn.net/weixin_44023519/article/details/102887521

版权

12 篇文章 1 订阅

订阅专栏

常见的水平垂直居中方法

1.先给父级元素设置水平居中

   text-align:center

在给当前垂直的元素转换成行内块元素和垂直居中

   display:inline-block;
   vertical-align:middle

在元素的后面不要回车，加上同级元素span，进行设置此参照物的高度等于父级元素100%

   display:inline-block;
   vertical-align:middle;
   height:100%

2.相对定位加绝对定位，父元素加相对定位，子元素加绝对定位

   left:0;
   right:0;
   top:0;
   bottom:0;
   margin:auto;
   position:absolute

3.弹性盒

   display:flex  //父元素
   margin:auto   //子元素

4.弹性盒2 直接给父级元素设置就可以了

   display:flex;
   justifly-content:center;
   align-items:center

窗口居中，固定定位

1.居中元素

position:fixed;
left:50%;
top:50%;
margin-left://定位元素高度一半，负值
margin-top://定位元素高度一半，负值

2.居中元素

position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;

3.居中元素–相对加绝对

 position:absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%)

关注