css居中div的几种常用方法
在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等。不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式。
1.text-align:center方式
代码:
1
2
3
4
5
|
< div class="center"> < span class="center_text"> 123 </ span > </ div > |
.center{ text-align:center; } center_text{ display:inline-block; width:500px }
这种方式可以水平居中块级元素中的行内元素,如inline,inline-block;
但是如果用来居中块级元素中的块级元素时,如div中的div,一旦内层的div有自己的宽度,这种方法就会失效。只能让里面div的文字等内容居中,而div仍然是左对齐的。
还有一种情况,当内部的元素脱离了文档流,display:absolute的情况下,不管是否是块级元素,都会居中,但是这种居中不是基于内部div的内容的,而是内部div最左端,内部div的最左端在div的中间(前提外部div设置了position:relative/absolute/fixed);
2.margin:0 auto方式
代码:
1
2
3
4
5
|
< div class="center"> < span class="center_text"> 我是块级元素,我是块级元素,我给自己设了display:block </ span > </ div > |
1
2
3
4
|
center_text{ display : block ; width : 500px <br> margin: 0 auto ; } |
这种对齐方式要求内部元素(.content_text)是块级元素,并且不能脱离文档流(如设置position:absolute),否则无效。
3.脱离文档流的居中方式。
这种通常应用在自定义弹框当中,把背景层设置成透明灰色,内容居中显示在最前面。
代码:
1
2
3
4
|
< div class="mask"> < div class="content">< br > 我是要居中的板块 </ div > </ div > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
.mask{ display : block ; position : fixed ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background : #000 ; filter: alpha(opacity= 30 ); -ms-filter: "alpha(opacity=30)" ; opacity: . 3 ; z-index : 10000 ; } . center { display : block ; position : fixed ; _position : absolute ; top : 50% ; left : 50% ; width : 666px ; height : 400px ; margin-left : -333px ; margin-top : -200px ; z-index : 10001 ; box-shadow: 2px 2px 4px #A0A0A0 , -2px -2px 4px #A0A0A0 ; background-color : #fff ; } |
效果:
这种居中方式,把内部div设置宽高之后,再设置top、left各为50%,设置完之后,这里是按照左端居中的,接着我们使用负边距的方式调整,将margin-top设置为负的高度的一半,margin-left设置为负的宽度的一半,就可以居中了。
这种方式还有一种居中方法就是设置margin:-(内部div高度的一半) auto;这用就不用设置left的值了。
4.display:table-cell
display:table-cell配合width,text-align:center,vertical-align:middle
让大小不固定元素垂直居中,这个方式将要对其的元素设置成为一个td,float、
absolute等属性都会影响它的实现,不响应margin属性;
代码:
1
2
3
4
|
< div class="center"> < div class="center_text"> 1111111< br > </ div > </ div > |
1
2
3
4
5
6
7
8
9
|
. center { display : table; width : 100% ; } .center_text { display : table-cell ; text-align : center ; vertical-align : middle ; } |
5.垂直居中
行内元素的垂直居中把height和line-height的值设置成一样的即可。
代码:
1
2
3
4
|
< div class="center"> < span class="center_text"> 我是要居中的内容< br > </ span > </ div > |
1
2
3
|
center { height: 40px ; line-heigth: 40px ;<br>} |
这样内部的span标签就可以居中了。
6.使用css3的translate水平垂直居中元素
代码:
1
2
3
|
< div class="center"> < div class="center_text"> 我是要居中的内容< br > </ div > < br ></ div > |
1
2
3
4
5
6
7
8
9
10
11
|
. center { position : relative ; height : 500px ;} .center_text{ position : absolute ; top : 50% ; left : 50% ; transform: translate( -50% , -50% ); width : 300px ; height : 600px ; } |
这种方式将脱离文档流的元素,设置top:50%,left:50%,然后使用transform来向左向上便宜半个内元素的宽和高。
7.使用css3计算的方式居中元素calc
代码:
1
2
3
4
|
< div class="center"> < div class="center_text"> 我是要居中的内容< br > </ div > </ div > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
. center { position : relative ; height : 300px ; width : 1000px ; border : 1px solid #ccc ; } .center_text{ position : absolute ; top : calc( 50% - 50px ); left : calc( 50% - 150px ); width : 300px ; height : 100px ; border : 1px solid #000 ; } |
效果:
这种方式同样是将脱离文档流的元素,然后使用计算的方式来设置top和left;
8.开启了定位的元素,相对于父元素的水平居中,垂直居中(已经确定宽和高)
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
9.
开启了定位的元素,相对于父元素的水平居中,垂直居中(不管宽和高有没有设置)
position: absolute;
transform: translateX(-50%);
transform: translateY(-50%);
left: 50%;
top: 50%;
以上是几种居中的方式,前3种是比较常用的,只要了解原理,后几种都是这个原理的不同实现方式。
转载文章;https://www.cnblogs.com/zhangwenjiajessy/p/6130658.html