HTML⽔平居中⽅法
⼀：对于⾏内元素采⽤text-align:center；的⽅式
⼆：采⽤margin:0 auto；来实现⽔平居中显⽰
html怎么让所有内容居中
三：⽤table实现
四；块级的元素但是通过转换成⾏内元素来实现块级元素的⽔平居中显⽰
五：⽗⼦元素都采⽤相对定位，⽗元素left:50%;⼦元素left:-50%；相对⾃⼰的长度减回50%，这样实现向右偏移后拉回多的部分
六：采⽤的flexbox，display:flex;
七：⽤⽗元素的 display:relative；直接采⽤position:absolute;left:0;right:0;margin:auto来实现⽔平以居中
下⾯是讲解的具体的代码：
1.
1. <!DOCTYPE html>
2. <!--
3. To change this license header, choose License Headers in Project Properties.
4. To change this template file, choose Tools | Templates
5. and open the template in the editor.
6. -->
7. <html>
8. <head>
9. <title>css的⽔平居中</title>
10. <meta charset="UTF-8">
11. <meta name="viewport" content="width=device-width">
12. <style type="text/css">
13. #page{
14. width: 100%;
15. color: white;
16. }
17. .he{
18. width: 100%;
19. height: 100px;
20. background: #625050;
21. text-align: center;
22. line-height: 100px;
23. }
24. .bo{
25. width: 100%;
26. background: #6aa087;
27. }
28. .fo{
29. height: 100px;
30. background: #2f5d34;
31. }
32. .content{
33. height: 100px;
34. border: 2px solid #fff;
35. }
36. .content1{
37. background: #66a05c;
38. text-align: center;
39. }
40. .content2{
41. background: #8a5841;
42. text-align: center;
43. }
44. .content2Bo{
45. height:50px;
46. width: 60%;
47. border: 2px solid red;
48. line-height: 50px;
49. margin: 0 auto;
50. }
51. .content3{
52. background: #2f5d34;
53. }
54. table{
55. margin: 0 auto;
56. }
57. .content4{
58. background: #8a5841;
59. text-align: center;
60. }
61. .contentBo4{
62. display: inline;
63. }
64. ul li{
65. list-style-type: none;
66. }
67. .content5{
68. float: left;
69. position: relative;
70. left: 50%;
71. }
72. .contentBo5{
73. position: relative;
74. left: -50%;
75. background: #231b40;
76. }
77. .content6{
78. width: 100%;
79. text-align: center;
80. background: #9ca05c;
81. display: flex;
82. align-items: center;
83. justify-content: center;
84. }
85. .content7{
86. position: relative;
87. }
88. .contentBo7{
89. position: absolute;
90. left: 0;
91. right: 0;
92. width: 80%;
93. border: 2px solid red;
94. margin: 0 auto;
95. text-align: center;
96. }
97. </style>
98. </head>
98. </head>
99. <body>
100. <div id="page">
101. <div class="he">
102. <h1>下⾯是对元素⽔平居中对齐的⼏个例⼦以及说明</h1>
103. </div>
104. <div class="bo">
105. <div class="content content1">
106. 这是内容区⼀：实现对⾏内元素的⽔平居中显⽰ 采⽤text-align:center；的⽅式。
107. </div>
108. <div class="content content2">
109. <div class="content2Bo">
110. 这是内容区⼆：红⾊区域部分采⽤margin:0 auto；来实现⽔平居中显⽰，当然要写好元素的宽度。
111. </div>
112. </div>
113. <div class="content content3">
114. <table><tbody><tr><td>
115. 这是内容区三：⽤table实现。
116. </td></tr></tbody></table>
117. </div>
118. <div class="content content4">
119. <ul class="contentBo4">
120. <li>这是第⼀⾏</li>
121. <li>这是第⼆⾏</li>
122. <li>这是内容区四：本来是contentBo4的块级的元素但是通过转换成⾏内元素来实现块级元素的⽔平居中显⽰。</li>
123. </ul>
124. </div>
125. <div class="content5">
126. <div class="content contentBo5">
127. 这是内容区五：⽗⼦元素都采⽤相对定位，⽗元素left:50%;⼦元素left:-50%；相对⾃⼰的长度减回50%，这样实现向右偏移后拉回多的部分。
128. </div>
129. </div>
130. <div class="content content6">
131. 这是内容区六：采⽤css3的flexbox，display:flex;
132. </div>
133. <div class="content content7">
134. <div class="contentBo7">
135. 这是内容区七:⽤⽗元素的 display:relative；直接采⽤position:absolute;left:0;right:0;margin:auto来实现⽔平以居中。
136. </div>
137. </div>
138. </div>
139. <div class="fo">
139. <div class="fo">
140. <pre> 总结下：其实实现⽔平居中只有⼀下⼏种思路：
141. 1：对于最简单的⾏内元素的居中采⽤text-align:center；设置即可。
142. 2：对于最普通的⽔平居中采⽤绝对定位后设置left：50%；后再采⽤各种⽅式去实现⾃⾝⽔平差的补回。 143. 3：对于普通的元素对齐还可以采⽤绝对定位后left:0;right:0；加上元素的宽度，在此基础之上就可以采⽤margin:auto；实现⽔平对齐了。
144. 4：⽤css3的Flexbox属性
145. 5：在元素外嵌套table实现，但是这样会有很多层嵌套
146. 6：marin:0 auto;⽅便的实现已知宽度的⽔平居中
147. </pre>
148. </div>
149. </div>
150. </body>
151. </html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论