css中设置居中的几种方式

最新推荐文章于 2022-05-10 08:35:51 发布

chenshf26

最新推荐文章于 2022-05-10 08:35:51 发布

阅读量483

点赞数

分类专栏： web 文章标签： css

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1，

margin: 0 auto; //水平居中

line-height: xxpx; //区和height一样的值实现文字垂直居中

2，在子元素中设置

padding: 50px;

background-clip: content-box;

其中padding的大小为外div减内div距离除以二，用到clip是因为padding会改变元素大小？

3，巧妙利用translate，不知道为什么translate的百分比是自己而不是父元素,子元素要定位

.test{
   height: 200px;
   width: 200px;
   background-color: blue;
   color: yellow;
   position: relative;
   left: 100px;
   top: 100px;
}
.in{
   width: 100px;
   height: 100px;
   background-color: white;
   position: relative;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}

4，利用margin和absolute定位（为什么要用到absolute呢，待我查一查）

若父子元素均用relative定位，子元素的margin-top会使影响父元素定位，若父用absolute,子用relative（或者不用）,或者相反，则没问题，并且margin-top原因可能和 relative的规范有关，具体不清楚，所以当上述成立条件时,可以用具体数值，但只有子元素为absolute时且top left right bottom为0，auto才能实现居中

.test{
   height: 200px;
   width: 200px;
   background-color: blue;
   color: yellow;
   position: relative;
   left: 100px;
   top: 100px;
}
.in{
   width: 100px;
   height: 100px;
   position: absolute;
   top:0;
   bottom: 0;
   left: 0;
   right: 0;
   margin:auto;
   background-color: white;
}

5，对于图片的奇技淫巧

使用一个图片占位赋予父元素大小，是的定位能够定位准确

值得注意的是，html里面的换行符会占用位置，如果不搞定的话，居中会产生奇怪的效果，并不完全居中，其奇技淫巧就是利用font-size:0;解决

囧，其实，本质问题不是换行符，是<p>标签，这个标签好像上下会有间隙，应该时换行符吧，把p改成div就没问题了‘

但是不知道为什么父元素会比子元素大4个元素，p会产生上下的超大间隙可能时换行符

*{
   font-size: 0;
}
.test{
   height: 200px;
   width: 200px;
   background-color: blue;
   color: yellow;
   position: absolute;
   left: 100px;
   top: 100px;
}
p{
   position: absolute;
   left: 50%;
   top: 50%;
   /*background-color: black;*/
}
.in-hide{
   visibility: hidden;
}
.in-show{
   position: absolute;
   left: -50%;
   top: -50%;
}

6，利用flex实现，略

7，和不定宽的居中有关

参考自：https://www.w3cschool.cn/css/css-center.html

chenshf26

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css中设置居中的几种方式

1，margin: 0 auto; //水平居中line-height: xxpx; //区和height一样的值实现文字垂直居中2，在子元素中设置padding: 50px;background-clip: content-box;其中padding的大小为外div减内div距离除以二，用到clip是因为padding会改变元素大小？3，巧妙利用translate，不...
复制链接

扫一扫