div垂直水平居中

版权声明:本文为博主原创文章,未经博主允许不得转载。

 

前言

说说div垂直水平居中的三种方法

正文

定位居中(需要知道div的宽高)

该方法是最为大众所熟知的居中方法,原理就是利用元素的绝对定位上下50%后再分别位移宽高的一半

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box{
width: 500px;
height: 500px;
background: red;
position: relative;
}
.center{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}

1
2
3
<div class="box">
<div class="center"></div>
</div>

tranlate居中

该方法需要浏览器支持css3的tranlate属性,利用tranlate的位移实现,并且该属性可以直接输出百分比来表现元素的宽高,故不需要知道元素的高度也可以实现垂直居中

代码如下(html结构如上):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box{
width: 500px;
height: 500px;
background: red;
position: relative;
}
.center{
width: 100px;
height: 30%;
background: blue;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%); /*-50%既为宽高的一半*/
}

display:table居中

该方法利用元素的css属性display的table值进行居中,把元素作为块级表格来显示用,用vertical-align属性与text-align属性进行居中
(注:如对display:table不了解可移驾 display属性)

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
.box{
width: 100%;
display: table;
background: red;
}
.center{
width: 200px;
height: 300px;
display: table-cell;
vertical-align: middle;
text-align: center;
background: blue;
}

1
2
3
4
5
6
7
<div class="box">
<div class="center">
<p>垂直水平居中</p>
<p>垂直水平居中</p>
<p>垂直水平居中</p>
</div>
</div>

定位与margin

该方法利用绝对定位改变display属性再用margin auto进行居中;

代码如下(html代码如上):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box{
width: 500px;
height: 500px;
background: red;
position: relative;
}
.center{
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: blue;
margin:auto auto;
}

总结

现实中我们经常看到一种布局要N种方法解决,其实这些主要是为了扩展思路,考察对css属性的运用和理解,实际应用中数种方法其实还是会应用最常规的方法,针对固定高,自适应高择优选择。