CSS 实现水平垂直居中的方式

微信扫一扫,分享到朋友圈

CSS 实现水平垂直居中的方式

这是面试经常会被问的问题,以前自己也看过相关的博客内容,但总是面试的过程中只能想到简单的几种,今天做一个总结:

实现方式分为两类:1、已知元素的宽高确定 2、元素宽高不定(常问)

分别对应不同的解决方案

已知元素的宽高确定 

1、absolute + 负margin

2、absolute + margin auto

3、absolute + calc

元素宽高不定

1、absolute + transform

2、lineheight

3、writing-mode

4、table

5、css-table

6、flex

7、grid

接下来分别说明:

元素高度确定

absolute + 负margin

子元素绝对定位,top和left分别为原来的50%, margin-left和margin-top为子元素宽度和高度的一半(具体像素值)

absolute + margin auto

子元素绝对定位,设置各个方向的距离都是0,margin设为auto,就可以实现在各个方向上居中

absolute + calc

子元素绝对定位,利用css3的计算属性calc,top和left为原来的50%减去子元素宽度和高度的一半,如图:

元素高度不定

absolute + transform

子元素绝对定位,利用css3新增的transform,transform的translate属性也可以设置百分比,其是相对于自身的宽和高,所以可以将translate设置为-50%,就可以做到居中了。如图:

lineheight(文本内容水平垂直居中)

利用行内元素居中属性 ,把box设置为行内元素,通过text-align就可以做到水平居中(父元素),通过vertical-align也可以在垂直方向做到居中(子元素)。如图:

writing-mode(很少有人知道的属性)

writing-mode可以改变文字的显示方向 ,比如可以通过writing-mode让文字的显示变为垂直方向( writing-mode: horizontal-tb;),配合通过text-align就可以做到水平和垂直方向的居中。但是:需要设置层三层结构,第二层垂直居中,第三层水平居中。

tabel单元格中的内容天然就是垂直居中的,只要添加一个水平居中text-align就好了

css-table

css新增的table属性 ,可以让我们把普通元素,变为table元素

父元素  display: table-cell;

text-align: center;

vertical-align: middle;

子元素: display: inline-block;

父元素      display: flex;

justify-content: center;

align-items: center;

css新出的网格布局,兼容性不太好

父元素   display: grid;

子元素  align-self: center;     justify-self: center;

这是目前总结出的css实现水平垂直居中的方案,如果还有其他方式,欢迎补充!

微信扫一扫,分享到朋友圈

CSS 实现水平垂直居中的方式

心随音动—NinaKiss糖果盒蓝牙耳机

上一篇

哪款投影比较好?排名第一的当贝投影,究竟有多好?

下一篇

你也可能喜欢

CSS 实现水平垂直居中的方式

长按储存图像,分享给朋友