因为这一类型题目我面试的时候被问了很多遍,然后就想总结一下吧。大概分了几类。
html代码如下:
<div id="parent">
<div id="child"></div>
</div>
其样式#container {
width: 300px;
height: 300px;
background-color: #000;
}
#child {
width: 100px;
height: 100px;
background-color: yellow;
}
第一类<不知道父元素的宽高和子元素的宽高>
- 利用绝对定位(其百分比是相对于父元素而言)和transform的translate属性(其百分比是相对于其自身而言)
#container {
position: relative;
}
#child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
(2) 利用父元素中设置display:table-cell;来把子元素模拟成一个表格单元格,再设置text-align=center;vertical-align:middle,还要将子元素设置为inline-block,(只是用于ie8+,ff,opear,chrome等现代浏览器)
#container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#child {
display: inline-block;
}
(3)直接使用弹性布局flex
这里就不贴代码了,毕竟这么简单快捷的办法,不会还好意思说做前端的?哈哈哈哈
第二类<适合只知道子元素的宽(实现水平居中)或者高(实现垂直居中)或者两者都知道(水平垂直居中>
(1)使用绝对定位和margin(最简单通用的办法)
#container {
position: relative;
}
#child {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
(2)还是使用绝对定位,这个方法也没有用到子元素的宽高,但是就是要定义其宽高,不然left和right会决定他的宽,top和bottom决定他的高。
原理:通过配对设置top/bottom、left/right为0,再设置margin:auto即可
#container {
position: relative;
}
#child {
position: absolute;
left: 0; left和right配对出现控制水平方向
right: 0;
top: 0; top和bottom配对出现控制垂直方向
bottom: 0;
margin: auto;
}
这种方法只支持ie9+、ff、chrome等现代浏览器
第三类<这种方法只需要知道父元素的高即可,而且这对ie6、ie7有效>
原理:为父元素设置一个font-size值,其值为其高度除以1.14;再加上text-align:center。
为子元素设置inline/inline-block和vertical-align:middle即可
《这一类与设置display:table-cell这一种方法加起来就可以解决兼容性问题的垂直居中了》
第四类<只是实现一边居中的一些属性>
(1)/* 不用知道子元素父元素元素的宽高,不过只能水平居中 ****************************************/
#child {
margin: 0 auto;}
(2)/* text-align:center;这个只能对图片文字按钮进行水平居中 ***************************/
(3)/* 将文字的line-height设置为父元素的高,可以实现垂直居中,不过只适合一行文字**********/