您的位置：首页 > 职场人生

【面试问题】关于水平居中和垂直居中

2016-03-23 18:38 621 查看

这个问题很常见，记录下来将来好在面试之前复习复习！！

1、margin:0 auto

0是随意的一个值，第二个值必须设为auto，此方法只能水平居中，对浮动元素和绝对定位元素无效！只对块状元素有效。

2、text-align:center

只能对图片、按钮、文字等行内元素（display为inline或inline-block）水平居中。此属性是相对于父元素来说的。

3、line-height

把该属性的值设置为文字父容器的高度，实现垂直居中。只适用于只有一行文字的情况。对块状和行内元素都使用。

4、使用表格：适用IE8以上和火狐等现代浏览器，不适用于IE6、7.

把需要居中的元素放在<td>标签中，表格默认对里面的内容进行垂直居中，所以只要设置td的属性align为center就可以实现水平居中（千万注意，这里的align是td的属性，不是CSS属性，千万注意！！！），或者在CSS中设置text-align:center也行。

<body>
<table>
<tr><td align=center>
<i>把该属性的值设置为文字父容器的高度，实现垂直居中</i>
</td></tr>
</table>
</body>

5、display:table-cell：适用IE8以上和火狐等现代浏览器，不适用于IE6、7.

display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。可以通过设置css属性text-align:center来水平居中、vertical-align:middle来垂直居中，这种方法只能在IE8+、谷歌、火狐等浏览器上使用。（vertical-align实现居中的性质非常混乱，记住这一种）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JuZhong</title>
<style>
div{
border:1px solid red;
width:500px;
height:500px;
display:table-cell;
vertical-align:middle;
text-align:center;
}

i{
font-weight:bold;
border:1px solid yellow;
}
</style>
</head>
<body>
<div>
<i>把该属性的值设置为文字父容器的高度，实现垂直居中</i>
</div>
</body>
</html>

6、使用绝对定位居中

父类：postion设置为relative，宽高已知；

子类：position设置为absolute,top和left相对于父类来移动的，此时的margin是相对于自己移动（听说position:、设置为absolute，margin相对于自己，真假求证啊）宽高已知；

接下来的一切就变得很好理解了。

top：50%（这个是父类高度的50%，以下类推）

left:50%

margin-top:自身高的负一半

margin-left:自身宽的负一半

7、适用于IE9+以上，火狐等浏览器

其他的条件和6相同，然后：

top:0

bottom:0

left:0

right:0

margin:auto

听说是这样解释的：top和bottom是没有优先级的，所以他们都要求是0的时候，浏览器只好让他们居中，同理对left和right，不过margin:auto这句话是不可少的。

8、利用浮动和相对定位来实现水平居中（个人觉得此方法有点矫情，不推荐。）

条件：

需要给居中的元素加一个包裹元素；

需要居中的元素可以不设置宽度；

包裹元素进行浮动，并且设置为相对定位，把left设置为：50%（父类宽度的50%）；

需要居中的元素设置为相对定位，把left设置为：-50%（父类也就是包裹元素宽度的50%，包裹元素和需要居中的元素没有设置宽度，所以他们宽度相等）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JuZhong</title>
<style>
.parent{
border:1px solid red;
width:500px;
height:500px;
}
.wraper{
margin-top:20px;
float:left;
clear:both ;
position:relative;
left:50%;
background-color:grey;
}
.child{
border:1px solid blue;
position:relative;
left:-50%;
}
</style>
</head>
<body>
<div class="parent">
<div class="wraper">
<div class="child">水平居中</div>
</div>
<div class="wraper">
<div class="child">水平居中</div>
</div>
</div>
</body>
</html>

9、传说中的方法，只适用于IE6、7

父元素宽高已知，父元素设置font-size为父元素高度/1.14；

子元素不必知道宽高，必须是inline或者inline-block元素，且设置vertical-align:middle。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航