kano个人技术博客详解怎样让一个元素用css居中

kano个人技术博客 web前端开发 1,433 次浏览 没有评论

让一个css元素居中可以说是老生常谈的问题了,这个问题每个web前端开发人员都会遇到,这篇文章是kano个人博客总结的各种让元素居中的方式,对于用cssimg图片居中显示css文字居中、包括行内或者块级的css表格居中按钮居中对齐等等情况均为通用,可供大家参考应用。

kano个人博客前端教程

※ 本身成文的这个时间点,大多数用户的浏览器都很新了,所以单纯的是把所有的方法列了出来,并没有太多的考虑兼容性的问题。

 行内元素css垂直居中:

 行内元素css垂直居中

1. <div class="nei">  
2.   啊啊啊啊啊啊  
3. </div>


1. .nei {  
2.   height: 40px;  
3.   background: #eee;  
4.   width: 200px;  
5. }

 比如这样一个固定高度40px的块级元素,想让其中的文本垂直居中css,可以通过设置其行高:

1. .nei {  
2.   height: 40px;  
3.   background: #eee;  
4.   width: 200px;  
5.   line-height: 40px;  
6. }

文本垂直居中css

元素就css居中显示了

行内元素css水平居中:

行内元素css水平居中

在上例中,假如不止想css让文字垂直居中,还想使用水平居中css的话,可以:

1. .nei {  
2.   height: 40px;  
3.   background: #eee;  
4.   width: 200px;  
5.   line-height: 40px;  
6.   text-align: center; 
7. }

水平居中css

块级元素css居中代码:

块级元素css居中代码 

1. .wai {  
2.   border: 1px solid red;  
3.   width: 300px;  
4.   height: 150px;  
5. }  
6.   
7. .nei {  
8.   height: 40px;  
9.   background: #eee;  
10.   width: 200px;  
11.   line-height: 40px;  
12.   text-align: center;  
13. }

想让其中的灰块在红框中设置css样式居中,有很多的办法,最常见的是设置margin:

1. .nei {  
2.   height: 40px;  
3.   background: #eee;  
4.   width: 200px;  
5.   line-height: 40px;  
6.   text-align: center;  
7.   margin: 0 auto;
8. }

css样式居中

将内部块元素设置为行内块,在外部块使用 text-align: center 可以达到同样的效果:

1. .wai {  
2.   border: 1px solid red;  
3.   width: 300px;  
4.   height: 150px;  
5.   text-align: center;  
6. }  
7.   
8. .nei {  
9.   height: 40px;  
10.   background: #eee;  
11.   width: 200px;  
12.   line-height: 40px;  
13.   text-align: center;  
14.   display: inline-block;  
15. }

或者利用flex布局:

1. .wai {  
2.   border: 1px solid red;  
3.   width: 300px;  
4.   height: 150px;  
5.   display: flex;  
6.   justify-content: center;  
7. }  
8.   
9. .nei {  
10.   height: 40px;  
11.   background: #eee;  
12.   width: 200px;  
13.   line-height: 40px;  
14.   text-align: center;  
15. }

※ 可以发现在这种实现中样式是都给父级框的

定宽元素css左右居中的话(如本例中内部元素的宽度为200px这种情况)还可以使用相对定位和负margin来实现:

1. .nei {  
2.   height: 40px;  
3.   background: #eee;  
4.   width: 200px;  
5.   line-height: 40px;  
6.   text-align: center;  
7.   position: relative;  
8.   left: 50%;  
9.   margin-left: -100px;  
10. }

 非定宽元素的使用定位的方法margin无法确定,但可以使用transform来代替:

1. .nei {  

2.   height: 40px;  

3.   background: #eee;  

4.   width: 200px;  

5.   line-height: 40px;  

6.   text-align: center;  

7.   position: relative;  

8.   left: 50%;  

9.   transform: translateX(-50%);  

10. }  

这种方法定宽与非定宽元素都可以使用,但是如果用户的浏览器比较老的话,需要注意一下浏览器对transform的支持情况。

块级元素垂直css居中对齐:

块级元素垂直css居中对齐

(我们还用这个例子,代码还是上面的代码,就不再贴一遍了)

定高块级元素的话,可以依葫芦画瓢,用相对定位和负margin来实现:

1. .nei {  
2.   height: 40px;  
3.   background: #eee;  
4.   width: 200px;  
5.   line-height: 40px;  
6.   text-align: center;  
7.   position: relative;  
8.   top: 50%;  
9.   margin-top: -20px;  
10. }

相对定位和负margin

非定高块级元素同理,也可以使用相对定位和transfrom来实现:

1. .nei {  
2.   background: #eee;  
3.   width: 200px;  
4.   line-height: 40px;  
5.   text-align: center;  
6.   position: relative;  
7.   top: 50%;  
8.   transform: translateY(-50%);  
9. }

 相对定位和transfrom

flex布局也可以实现垂直css内容居中:

1. .wai {  
2.   border: 1px solid red;  
3.   width: 300px;  
4.   height: 150px;  
5.   display: flex;  
6.   align-items: center;  
7. }

还有一个并不是很常用的方法,将父级框设为table-cell,然后用 vertical-align: middle来实现垂直css页面居中:

1. .wai {  
2.   border: 1px solid red;  
3.   width: 300px;  
4.   height: 150px;  
5.   display: table-cell;  
6.   vertical-align: middle;  
7. }

css中怎么让块级元素div居中:

css让块级元素div居中

(仍然用这个例子)

水平垂直居中css = 水平css盒子居中 + 垂直居中,所以很多方法都是上面两种方法的结合,不过还介绍了另外的方法

定宽高元素居中显示,使用相对定位,可以将上面两个例子中的方法结合起来:

1. .wai {  
2.   border: 1px solid red;  
3.   width: 300px;  
4.   height: 150px;  
5. }  
6.   
7. .nei {  
8.   background: #eee;  
9.   width: 200px;  
10.   line-height: 40px;  
11.   text-align: center;  
12.   position: relative;  
13.   top: 50%;  
14.   left: 50%;  
15.   margin-top: -20px;  
16.   margin-left: -100px;  
17. }

相对定位

对于定宽高元素而言,还有一种比较常用的方法,绝对定位上下左右0,margin设为auto:

1. .wai {  
2.   border: 1px solid red;  
3.   width: 300px;  
4.   height: 150px;  
5.   position: relative;  
6. }  
7.   
8. .nei {  
9.   background: #eee;  
10.   width: 200px;  
11.   line-height: 40px;  
12.   height: 40px;  
13.   text-align: center;  
14.   position: absolute;  
15.   top: 0;  
16.   bottom: 0;  
17.   left: 0;  
18.   right: 0;  
19.   margin: auto;  
20. }

写起来略麻烦,不过新老浏览器都适用。不过注意如果这种情况宽高不确定的话,元素将会撑满不确定那一方的宽(高)

非定宽元素,依旧可以用transform:

1. .nei {  
2.   background: #eee;  
3.   width: 200px;  
4.   line-height: 40px;  
5.   text-align: center;  
6.   position: relative;  
7.   left: 50%;  
8.   top: 50%;  
9.   transform: translate(-50%, -50%);  
10. }

flex实现:

1. .wai {  
2.   border: 1px solid red;  
3.   width: 300px;  
4.   height: 150px;  
5.   display: flex;  
6.   align-items: center;  
7.   justify-content: center;  
8. }  
9.   
10. .nei {  
11.   background: #eee;  
12.   width: 200px;  
13.   line-height: 40px;  
14.   text-align: center;  
15. }

利用tabel-cell,并将元素设为行内块:

1. .wai {  
2.   border: 1px solid red;  
3.   width: 300px;  
4.   height: 150px;  
5.   display: table-cell;  
6.   vertical-align: middle;  
7.   text-align: center;  
8. }  
9.   
10. .nei {  
11.   background: #eee;  
12.   width: 200px;  
13.   line-height: 40px;  
14.   text-align: center;  
15.   display: inline-block;  
16. }

父元素使用grid,子元素margin设为auto:

1. .wai {    
2.   border: 1px solid red;    
3.   width: 300px;    
4.   height: 150px;    
5.   display: grid;    
6. }    
7.     
8. .nei {    
9.   background: #eee;    
10.   width: 200px;    
11.   line-height: 40px;    
12.   text-align: center;    
13.   margin: auto;    
14. }

可以说是相当简洁了,不过要注意的是grid布局实在是….相当的新,比flex布局出现的还晚,所以用的时候一定要注意一下浏览器的支持情况。

 

以上就是kano个人博客总结的web前端开发技术需要用到的各种元素css的居中方法,除去css背景居中有background-position这样的属性可以解决。行内元素的居中比较单一;而块级元素有很多方法,如果不考虑兼容性的话,相对定位transform,gird都是比较好的方法。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Go