H5C3--transform实现任何元素居中对齐

Posted QinXiao.Shou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5C3--transform实现任何元素居中对齐相关的知识,希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8        .box{
 9            width: 440px;
10            height: 500px;
11            background-color: #ccc;
12            overflow: hidden;
13            position: relative;
14        }
15        .son{
16            width: 200px;
17            height: 100px;
18            background-color: red;
19            margin: auto;
20            position: absolute;
21            /*定位:参照的是父容器*/
22            left: 50%;
23            top: 50%;
24            /*偏移:偏移中的百分比参照的是自身*/
25            /*定位加变化是解决居中垂直对齐问题的神器、*/
26            transform: translate(-50%,-50%);
27         }
28     </style>
29 </head>
30 <body>
31 <div class="box">
32    <div class="son"></div>
33 </div>
34 
35 </body>
36 </html>

 

以上是关于H5C3--transform实现任何元素居中对齐的主要内容,如果未能解决你的问题,请参考以下文章

css怎样让div里的表格居中对齐

一个元素左对齐,另一个元素居中对齐,但居中的元素被左元素推动

Android学习——LinearLayout布局实现居中左对齐右对齐

我怎样才能使元素居中[重复]

使用 flexbox 左对齐和居中对齐元素

如何将一个设置为absolute的div居中对齐