CSS定位“十字架”水平垂直居中

本篇内容介绍了"CSS定位"十字架"水平垂直居中"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1.先看要实现的效果

实际的效果图

可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中，然后再父级的div中定位出两个十字架的div。

看实现代码：

XML/HTML Code复制内容到剪贴板

1. <html>

2. <head>

3. <title>title>

4. <style>

5. body{margin:0;padding:0}

6. /*定位父级div水平垂直居中*/

7. .body_main{

8. width:200px;

9. height: 300px;

10. background-color: #3091E5;

11. margin:-150px 0 0 -100px;

12. top:50%;

13. left:50%;

14. position: absolute;

15. }

16. /*定位水平div垂直居中*/

17. .row_div{

18. width:200px;

19. height: 50px;

20. background-color:#88E500;

21. position: absolute;

22. top:50%;

23. margin:-25px 0 0 0;

24. }

25. /*定位列div水平居中*/

26. .clou_div{

27. width:50px;

28. height: 300px;

29. background-color: #3c510c;

30. left:50%;

31. position: absolute;

32. margin:0 0 0 -25px;

33. }

34. style>

35. head>

36. <body>

37. <div class="body_main">

38. <div class="row_div">横向的divdiv>

39. <div class="clou_div">竖直的divdiv>

40. div>

41. body>

42. html>

div默认的宽度是100%，当div绝对定位以后，其宽度是按照div中内容的宽度。

总结：

css中的绝对定位是相对于最近已定位的祖先元素进行定位，如果元素没有已经定位的祖先元素，那么位置相对于初始的包含块进行定位。

"CSS定位"十字架"水平垂直居中"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！