CSS实现水平垂直居中的常用方法

网友投稿 1443 2022-05-30

在前端开发过程中,水平居中、垂直居中、水平垂直居中都很常见。本章来看看水平垂直居如何实现。

Demo:

index

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

效果:

水平居中

直接设置元素的margin: 0 auto即可。

垂直居中

垂直居中比较复杂一些。我们要明确我们的元素是要在屏幕居中,还是要在所在块元素(如div)中居中。我们要用到position定位。position默认是static的,除此之外,absolute、relative、fixed。垂直居中需要通过position定位来完成。

水平居中之所以只需要设置margin:0 auto就可以完成的主要原因是body的水平width是可知的。但是body的height默认是0,随内容自适应变化高度。即使设置height的值,也不会有效。因为它还是有很多情况无法确定。因此无法像水平居中那么容易设置居中。所以垂直居中只好参考包含块的左边、上边这些确定的地方做定位来实现居中。我们讨论position的absolute、relative、fixed三个不同的值来如何实现居中。

(1)fixed固定定位

使用fixed定位的块,它的参考对象是窗口(浏览器窗口)且只针对浏览器窗口的上下左右定位,不会随着窗口大小改变其位置(如果要让其改变可以将它的定位值,设成百分比形式),它的位置是固定不变的。常用于固定位置的小广告,常用于网站边缘的公司联系方式和快速回到顶部。

第一种方式:

.content { width: 100px; height: 100px; background: orange; position: fixed; top: 50%; margin-top: -50px; }

1

2

3

4

5

6

7

8

如果不加margin-top: -50px,那么div的中心到窗口的垂直中心的距离是div自身高度的一半。所以div向上偏移div的高度的一半就可以了。因为div高度为100px,所以设置margin-top: -50px就可实现了。margin-top的值:正数是向下偏移,负数是向上偏移。

在CSS3的transform属性也可以实现向上偏移,通过设置div的transform: translateY(-50%),就可以使得div向上平移(translate)自身高度的一半(50%),如下面所示。

第二种方式:

.content { width: 100px; height: 100px; background: orange; position: fixed; top: 50%; transform: translateY(-50%); }

1

2

3

4

5

6

7

8

效果如下:

水平垂直居中的样式:

.content { width: 100px; height: 100px; background: orange; position:fixed; top:50%; left:50%; margin-top:-50px; margin-left:-50px; }

1

2

3

4

5

6

7

8

9

10

或者:

.content { width: 100px; height: 100px; background: orange; position:fixed; top:50%; left:50%; transform: translate(-50%,-50%); }

1

2

3

4

5

6

7

8

9

效果:

absolute、relative的垂直居中

我们用一个新例子来做演示:

index

div one
content

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

CSS实现水平垂直居中的常用方法

23

24

25

26

27

28

29

30

31

32

33

34

效果

(1)absolute绝对定位

absolute绝对定位,不占据位置,会随着窗口大小与页面一起改变,脱离文档流意味着元素可以堆叠。position为absolute的元素或块的定位是参考离它最近的position为fixed或relative或absolute的父元素。如果找不到这样的父元素那它就会参考浏览器窗口定位(不是body元素哦!)。

水平垂直居中:

// 父元素的样式 .content_outer{ width: 500px; height: 500px; background-color: red; position:absolute;// 父元素的这个值可以是fixed、relative、absolute } // 需要居中的元素 .content { width: 100px; height: 100px; background: orange; position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-50px; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

或者

// 父元素的样式 .content_outer{ width: 500px; height: 500px; background-color: red; position:absolute;// 父元素的这个值可以是fixed、relative、absolute } // 需要居中的元素 .content { width: 100px; height: 100px; background: orange; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

效果

(2)relative相对定位

采取相对定位的元素,将相对于它原来的位置(即没有进行相对定位前),设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

水平垂直居中:

.content { width: 100px; height: 100px; background: orange; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); }

1

2

3

4

5

6

7

8

9

效果

谢谢阅读

CSS

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:gin-validator参数校验
下一篇:Qt-QML-ComboBox-自定义,实现状态表示,内容可以动态正价,使用ListModel
相关文章