前言
前面我总结过一篇关于几种水平和垂直居中方法的文章,可以知道,实现水平居中和垂直居中的方法真的是数不清,但是各自都会有各自的优缺点,想要在实际的应用当中去正确的使用这些方法,就要靠平时的积累,熟悉掌握几种就可以应付绝大部分的居中问题。最近我又学习到了几种神奇的方法,这就来分享一下。
正文
水平居中的方法
text-align
+display:inline-block
属性配合使用。table
+margin
属性配合使用absolute
+transform
属性配合使用
方法一、text-align
+ display:inline-block
#parent{
text-align: center;}
#child{
display: inline-block;}
我们先创建一个普通样式
<style type="text/css">
#parent{
width: 100%;
height: 200px;
background: pink;
}
#child{
width: 200px;
height: 200px;
background: #987;
}
</style>
<div id="parent">
<div id="child">
水平居中
</div>
</div>
这时候显示的效果就是这样的
我们再在样式上添加两个属性
#parent{
width: 100%;
height: 200px;
background: pink;
text-align: center;
}
#child{
width: 200px;
height: 200px;
background: #987;
display: inline-block;
}
<div id="parent">
<div id="child">
水平居中
</div>
</div>
这时候就水平居中了
那我们来分析一下,为什么要用这两个属性呢?为什么要用inline-block
而不用inline
呢?
text-align
属性:是为文本内容设置对齐方式
left
:左对齐
center
:居中对齐
right
:右对齐
那这时候你会产生疑问?这个属性最初知识对文本起作用,那为什么这个时候对div
元素也起作用呢?关键就在于,为子级元素设置了display
属性,值为inline-block
。
display
属性有常见的几个属性:
block
:块级元素
inline
:内联元素
width
和height
属性就会失效
inline-block
:行内块级元素(块级+ 内联)
width
和height
属性有效
当子级元素是一个内联元素的时候,那text-align
就会有效。
inline-block
使用的是内联元素的特点,
为什么不把子级元素的display属性设置成inline
呢?因为内联元素会有一个自身的问题,当我们把某一个元素的inline内联元素时,其中的chlid
的width
和height
属性就会失效。可以试试inline
的效果。
所以我们使用inline-block
是为了让child
的width
和height
属性都有效,才能达到我们想要的效果。
优点与缺点
- 优点:浏览器兼容性比较好,对于IE浏览器6-9版本,
text-align
和inline-block
都支持。 - 缺点:
text-align
属性具有继承性,导致子级元素的文本也是居中显示。(解决,在子元素复原text-align
的属性)
如果子级元素的文本是不需要居中的,那就要对它进行处理,在子级元素中设置text-align
的值为left
就可以覆盖掉父级元素的text-align
属性值,
方法二、table
+ margin
属性配合使用
.child{
dispaly: table;
margin: 0 auto;
}
在第一种方法的普通样式中添加关键css内容
#parent{
width: 100%;
height: 200px;
background: pink;
}
#child{
width: 200px;
height: 200px;
background: #987;
display: table;
margin: 0 auto;
}
<div id="parent">
<div id="child">
水平居中
</div>
</div>
实现的是相同的效果
分析
margin
:
- 设置为一个值,表示上右下左都相同。
- 设置为两个值,第一个表示上下,第二个表示左右。
- 设置为三个值,第一个表示上,第二个表示左右,第三个表示下。
- 设置为四个值,上 右 下 左。
设置margin: 0 auto;
其中 auto
表示的是根据浏览器自动分配。因此浏览器会等分左右外边距
display: table;
:
将display
设置成block
也可以得到同样的效果,但是内联样式inline
就会让child
的宽高失效。因此display
可设置成两个值:table
、block
。
优点与缺点
- 优点:只需要对子级元素进行设置就可以实现水平方向居中显示
- 缺点:
如果子级元素脱离文档流,导致margin属性的值失效。
所谓的元素脱离文档流,可能的情况就是子级元素设置为以下三种情况就会让margin属性的值失效position: absolute;
position: fixed;
float: left/right
方法三、absolute
+ transform
属性配合使用
#parent{
position: relative;
}
#child{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
使用普通样式加上以上属性
#parent{
width: 100%;
height: 200px;
background: pink;
position: relative;
}
#child{
width: 200px;
height: 200px;
background: #987;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<div id="parent">
<div id="child">
水平居中
</div>
</div>
分析
position: absolute;
当前元素设置为绝对定位后:
- 如果父级元素没有定义定位的话,当前元素是相对于页面定位
- 如果父级元素开启了定位的话(非定位
static
下),当前元素是相对于父级元素定位。
left: 50%;
子级元素相对于父级元素的左边距离是50%;
transform: translateX(-50%);
子级元素往左边移动子级元素宽度的一半。transform表示平移,translateX()表示水平平移。
优点与缺点
- 优点:父级元素是否脱离文档流,不影响子级元素水平居中效果。
- 缺点:transform属性是CSS3中新增的属性,浏览器支持情况不好。
垂直居中的方法
说完水平居中的方法,下面来介绍两种常见的垂直居中的方案。有以下两种常见的方式。
table-cell
+vertical-algin
属性absolute
+transform
属性配合使用
方法一、table-cell
+ vertical-algin
配合使用
方法一中的关键代码
#parent{
display: table-cell;
vertical-align: middle;
}
普通样式修改成以下形式:
#parent{
width: 200px;
height: 300px;
background: pink;
}
#child{
width: 200px;
height: 200px;
background: #987;
}
添加上述关键代码。
#parent{
width: 200px;
height: 300px;
background: pink;
display: table-cell;
vertical-align: middle;
}
#child{
width: 200px;
height: 200px;
background: #987;
}
效果如下:
分析
vertical-align: middle;
用于设置文本内容的垂直方向对齐方式,其中vertical-align
的值有以下三种:
- top:顶部对齐
- middle:居中对齐
- bottom:底部对齐
display: table-cell;
table-cell的作用,其中table
是设置当前元素为<table>
元素,table-cell
是设置当前元素为<td>
元素(单元格)
将两个核心要素整合在一起就可以实现居中效果,当我们把父级元素的display
属性设置为table-cell
就相当于把父级元素设置成表格中的单元格,单元格的内容是可以由两种方式对齐的,一种是水平对齐,另一种是垂直对齐,作为子级元素的div
就相当于单元格里面的内容,最终呈现出垂直居中的效果。
优点与缺点
- 优点:浏览器的兼容性比较好(主要还是针对老版本的浏览器,因为使用的
table-cell
以及vertical-algin
属性都是属于CSS2 版本的内容,而CSS2的对老版本的浏览器兼容性是比较好的) - 缺点:
vertical-algin
属性具有继承性,导致父级元素的文本也是居中显示的。
在父级元素中添加文本内容,这个内容也会呈现居中显示。
方法二、absolute
+ transform
属性配合使用
关键代码
#parent{
position: relative;
}
#child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
实现
#parent{
width: 200px;
height: 300px;
background: pink;
position: relative;
}
#child{
width: 200px;
height: 200px;
background: #987;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div id="parent">
<div id="child">
垂直居中
</div>
</div>
此部分与水平居中的第三种档案类似,在此可参考上面。
居中布局
其实这个就是垂直与水平方法进行整合。
table
+margin
实现水平方向居中,table-cell
+vertical-algin
实现垂直方向居中。absolute
+transform
实现水平方向和垂直方向的居中显示。
方法一:table
+ margin
实现水平方向居中,table-cell
+ vertical-algin
实现垂直方向居中
#parent{
width: 400px;
height: 400px;
background: pink;
display: table-cell;
vertical-align: middle;
}
#child{
width: 200px;
height: 200px;
background: #987;
display: table;
margin: 0 auto;
}
<div id="parent">
<div id="child">
居中布局
</div>
</div>
第一种解决方案的优缺点
缺点:
我们可以知道parent
中table-cell
其实是<td>
变成了父级元素,而child
中的table
值是<table>
却变成了子级元素,所以这里需要进行改进。
将子级元素的display
属性值修改为block
实现同样效果,这样也解决了语块的问题。
#child{
width: 200px;
height: 200px;
background: #987;
display: block;
margin: 0 auto;
}
优点:浏览器兼容性比较好。
方法二:absolute
+ transform
实现水平方向和垂直方向的居中显示
关键代码
#parent {
position: relative;
}
#child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
很好理解,就是结合水平和垂直的居中方法,通过定位属性进行居中,
实现代码
#parent {
width: 400px;
height: 400px;
background: pink;
position: relative;
}
#child {
width: 200px;
height: 200px;
background: #987;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
优点与缺点
缺点:兼容性比较差
优点:可以适用比较多的场景,方法好
总结
并没有哪个解决方案是最优的,我们需要根据实际的应用场景实现相同的效果。