CSS垂直居中详解
Posted fullstack_lth
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS垂直居中详解相关的知识,希望对你有一定的参考价值。
一般情况下有的需要问水平居中和垂直居中.
常见的水平居中和垂直居中有:
水平居中:
- 行内元素: text-align: center;
- 块级元素:margin: 0 auto;
- absolute+ transform;
- flex+ justify-content: center;
垂直居中:
- line-height: height;
- absolute+ transform;
- flex+ justify-content: center;
- table
垂直居中是一个比较常见的问题,更是一道无数前端er都被问到过的面试题。
以下分两种情况,情况一要知道居中元素的长和宽,情况二不需要知道居中元素的长和宽。
目录
以下3种需要知道子元素的宽度和高度的情况生成的垂直居中样式为:
说明:以下方法都不需要知道子元素的长和宽,所以不需要size类,所以子元素的宽度为文本大小,创建的页面样式为:
情况一:仅居中元素定宽高适用
- absolute + 负margin
- absolute + margin auto
- absolute + calc
情况二:居中元素不定宽高
- absolute + transform
- lineheight
- writing-mode
- table
- css-table
- flex
- grid
以下3种需要知道子元素的宽度和高度的情况生成的垂直居中样式为:
1.absolute + 负margin
绝对定位的百分比是相对于父元素的宽高,通过这个特性可以让子元素的居中显示,但绝对定位是基于子元素的左上角,期望的效果是子元素的中心居中显示。
为了修正这个问题,可以借助外边距的负值,负的外边距可以让元素向相反方向定位,通过指定子元素的外边距为子元素宽度一半的负值,就可以让子元素居中了,css代码如下
.container
border: 1px solid aqua;
width: 300px;
height: 300px;
position: relative;
.element
background: yellowgreen;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
.element.size
width: 100px;
height: 100px;
这是比较常见的方式,这种方式比较好理解,兼容性也很好,缺点是需要知道子元素的宽高。
2. absolute + margin auto
这种方式也要求居中元素的宽高必须固定,html代码如下
<div class="container">
<div class="element size">123123</div>
</div>
这种方式通过设置各个方向的距离都是0,此时再将margin设为auto,就可以在各个方向上居中了
.container
border: 1px solid aqua;
width: 300px;
height: 300px;
position: relative;
.element
background: yellowgreen;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
.element.size
width: 100px;
height: 100px;
这种方法兼容性也很好,缺点是需要知道子元素的宽高.
3. absolute + calc
这种和第一种类似,只不过将两次属性合并在一个属性中,HTML代码如下
<div class="container">
<div class="element size">垂直居中</div>
</div>
感谢css3带来了计算属性,既然top的百分比是基于元素的左上角,那么在减去宽度的一半就好了,代码如下
.container
border: 1px solid aqua;
width: 300px;
height: 300px;
position: relative;
.element
background: yellowgreen;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
.element.size
width: 100px;
height: 100px;
这种方法兼容性依赖calc的兼容性,缺点是需要知道子元素的宽高
说明:以下方法都不需要知道子元素的长和宽,所以不需要size类,所以子元素的宽度为文本大小,创建的页面样式为:
4. absolute + transform
还是绝对定位,但这个方法不需要子元素固定宽高,所以不再需要size类了,HTML代码如下
<div class="container">
<div class="element">垂直居中</div>
</div>
修复绝对定位的问题,还可以使用css3新增的transform,transform的translate属性也可以设置百分比,其是相对于自身的宽和高,所以可以讲translate设置为-50%,就可以做到居中了,代码如下
.container
border: 1px solid aqua;
width: 300px;
height: 300px;
position: relative;
.element
background: yellowgreen;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
这种方法兼容性依赖translate2d的兼容性
5. lineheight
利用行内元素居中属性也可以做到水平垂直居中,HTML代码如下
<div class="container">
<div class="element">垂直居中</div>
</div>
把box设置为行内元素,通过text-align
就可以做到水平居中,但很多同学可能不知道通过通过vertical-align
也可以在垂直方向做到居中,代码如下
.container
border: 1px solid aqua;
width: 300px;
height: 300px;
line-height: 300px;
position: relative;
text-align: center;
.element
background: yellowgreen;
display: inline-block;
line-height: initial;
vertical-align: middle;
这种方法需要在子元素中将文字显示重置为想要的效果
6. writing-mode
很多同学一定和我一样不知道writing-mode
属性,感谢@张鑫旭老师的blog.简单来说writing-mode可以改变文字的显示方向。
更神奇的是所有水平方向上的css属性,都会变为垂直方向上的属性,比如text-align
,通过writing-mode
和text-align
就可以做到水平和垂直方向的居中了,只不过要稍微麻烦一点
<div class="container">
<div class="container-inner">
<div class="element">垂直居中</div>
</div>
</div>
.container
border: 1px solid aqua;
width: 300px;
height: 300px;
position: relative;
writing-mode: vertical-lr;
text-align: center;
.container-inner
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
.element
background: yellowgreen;
display: inline-block;
margin: auto;
text-align: left;
7. table
曾经table被用来做页面布局,现在没人这么做了,但table也能够实现水平垂直居中,但是会增加很多冗余代码
<table>
<tbody>
<tr>
<td class="container">
<div class="element">123123</div>
</td>
</tr>
</tbody>
</table>
tabel单元格中的内容天然就是垂直居中的,只要添加一个水平居中属性就好了
.container
border: 1px solid aqua;
width: 300px;
height: 300px;
text-align: center;
.element
background: yellowgreen;
display: inline-block;
这种方法就是代码太冗余,而且也不是table的正确用法
8. table-cell
css的table-cell属性,可以让我们把普通元素,变为table元素的现实效果,但还是需要将父元素中的设置为水平垂直居中。即
text-align:center;
vertical-align:middle;
同时要将子元素设置为inline-block;如果不设置,则子元素宽度会变为100%,其实这个主要看业务需求,可以设置为一个固定宽度。
<div class="container">
<div class="element">垂直居中</div>
</div>
通过css属性,可以让div显示的和table-cell一样
.container
border: 1px solid aqua;
width: 300px;
height: 300px;
display: table-cell;
text-align: center;
vertical-align: middle;
.element
background: yellowgreen;
display: inline-block;
这种方法和table一样的原理,但却没有那么多冗余代码,兼容性也还不错
9. flex
flex作为现代的布局方案,颠覆了过去的经验,只需几行代码就可以优雅的做到水平垂直居中
<div class="container">
<div class="element">垂直居中</div>
</div>
.container
border: 1px solid aqua;
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
.element
background: yellowgreen;
目前在移动端已经完全可以使用flex了,PC端需要看自己业务的兼容性情况.
10. grid
通过grid也可以实现水平垂直居中
<div class="container">
<div class="element">垂直居中</div>
</div>
.container
border: 1px solid aqua;
width: 300px;
height: 300px;
display: grid;
.element
background: yellowgreen;
align-self: center;
justify-self: center;
代码量也很少,但兼容性不如flex,不推荐使用.
以上代码都经过chrome浏览器测试,详细代码见GitHub:https://github.com/karma2014/css-skills/tree/master/center
总结
下面对比下各个方式的优缺点,肯定又双叒叕该有同学说回字的写法了,简单总结下
- PC端有兼容性要求,宽高固定,推荐absolute + 负margin
- PC端有兼容要求,宽高不固定,推荐css-table
- PC端无兼容性要求,推荐flex
- 移动端推荐使用flex
以上是关于CSS垂直居中详解的主要内容,如果未能解决你的问题,请参考以下文章
web前端练习30----Css,布局(文档流,浮动,清除浮动,浮动高度塌陷,垂直外边距重叠问题,定位,层级,居中,flex布局及练习)
web前端练习30----Css,布局(文档流,浮动,清除浮动,浮动高度塌陷,垂直外边距重叠问题,定位,层级,居中,flex布局及练习)