zoukankan html css js c++ java

CSS3疑难问题---7、实现元素水平垂直居中

一、总结

一句话总结：

方式一：绝对定位+margin: auto;：子元素绝对定位，并且偏移全为0，margin设置为auto

方式二：绝对定位+margin自身负偏移：子元素绝对定位且左（left）上（top）偏移50%，再margin负偏移左（left）上（top）自身的一半

方式三：绝对定位+transform:translate 平移方式：子元素绝对定位且左（left）上（top）偏移50%，使用transform:translate实现自身左上偏移50%

方式四：弹性盒子：设置父元素为弹性盒子，并且设置主轴对齐方式（justify-content）和侧轴对齐方式（align-items）都为center

1、实现元素水平垂直居中方式一：绝对定位+margin: auto;？

子元素绝对定位，并且偏移全为0，margin设置为auto

.parent_box{
     400px;
    height: 400px;
    background-color: lightseagreen;
    position: relative;
}
.child_box{
     200px;
    height: 200px;
    background-color: red;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

2、实现元素水平垂直居中方式二：绝对定位+margin自身负偏移？

子元素绝对定位且左（left）上（top）偏移50%，再margin负偏移左（left）上（top）自身的一半

.parent_box{
     400px;
    height: 400px;
    background-color: lightseagreen;
    position: relative;
}
.child_box{
     200px;
    height: 200px;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

3、实现元素水平垂直居中方式三：绝对定位+transform:translate 平移方式？

子元素绝对定位且左（left）上（top）偏移50%，使用transform:translate实现自身左上偏移50%

.parent_box{
     400px;
    height: 400px;
    background-color: lightseagreen;
    position: relative;
}
.child_box{
     200px;
    height: 200px;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

4、实现元素水平垂直居中方式四：弹性盒子？

设置父元素为弹性盒子，并且设置主轴对齐方式（justify-content）和侧轴对齐方式（align-items）都为center

.parent_box{
     400px;
    height: 400px;
    background-color: lightseagreen;
    display: flex;
    justify-content: center;
    align-items: center;
}
.child_box{
     200px;
    height: 200px;
    background-color: red;
}

二、实现元素水平垂直居中

博客对应课程的视频位置：7、实现元素水平垂直居中
https://www.fanrenyi.com/video/13/179

方式一：绝对定位+margin: auto;：

子元素绝对定位，并且偏移全为0，margin设置为auto

 1 .parent_box{
 2      400px;
 3     height: 400px;
 4     background-color: lightseagreen;
 5     position: relative;
 6 }
 7 .child_box{
 8      200px;
 9     height: 200px;
10     background-color: red;
11     position: absolute;
12     left: 0;
13     right: 0;
14     top: 0;
15     bottom: 0;
16     margin: auto;
17 }

方式二：绝对定位+margin自身负偏移：

子元素绝对定位且左（left）上（top）偏移50%，再margin自身负偏移左（left）上（top）自身的一半

 1 .parent_box{
 2      400px;
 3     height: 400px;
 4     background-color: lightseagreen;
 5     position: relative;
 6 }
 7 .child_box{
 8      200px;
 9     height: 200px;
10     background-color: red;
11     position: absolute;
12     left: 50%;
13     top: 50%;
14     margin-left: -100px;
15     margin-top: -100px;
16 }

方式三：绝对定位+transform:translate 平移方式：

子元素绝对定位且左（left）上（top）偏移50%，使用transform:translate实现自身左上偏移50%

 1 .parent_box{
 2      400px;
 3     height: 400px;
 4     background-color: lightseagreen;
 5     position: relative;
 6 }
 7 .child_box{
 8      200px;
 9     height: 200px;
10     background-color: red;
11     position: absolute;
12     left: 50%;
13     top: 50%;
14     transform: translate(-50%,-50%);
15 }

方式四：弹性盒子：

设置父元素为弹性盒子，并且设置主轴对齐方式（justify-content）和侧轴对齐方式（align-items）都为center

 1 .parent_box{
 2      400px;
 3     height: 400px;
 4     background-color: lightseagreen;
 5     display: flex;
 6     justify-content: center;
 7     align-items: center;
 8 }
 9 .child_box{
10      200px;
11     height: 200px;
12     background-color: red;
13 }

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>实现元素水平垂直居中</title>
 6     <style>
 7         /*第一种方式：子元素绝对定位+margin: auto
 8         父元素设置为相对定位，子元素设置为绝对定位，并且子元素的上下左右的偏移都是0，
 9         子元素的margin设置为auto
10         */
11         /*.parent_box{*/
12         /*     400px;*/
13         /*    height: 400px;*/
14         /*    background-color: lightseagreen;*/
15         /*    position: relative;*/
16         /*}*/
17         /*.child_box{*/
18         /*     200px;*/
19         /*    height: 200px;*/
20         /*    background-color: red;*/
21         /*    position: absolute;*/
22         /*    top: 0;*/
23         /*    bottom: 0;*/
24         /*    left: 0;*/
25         /*    right: 0;*/
26         /*    margin: auto;*/
27         /*}*/
28 
29         /*第二种方式：子元素绝对定位+margin左上负偏移自身的一半
30         父元素设置为相对定位，子元素设置为绝对定位，并且子元素的上左的偏移都是50%，
31         再将子元素的margin-left和margin-top负偏移为自身的一半
32         */
33         /*.parent_box{*/
34         /*     400px;*/
35         /*    height: 400px;*/
36         /*    background-color: lightseagreen;*/
37         /*    position: relative;*/
38         /*}*/
39         /*.child_box{*/
40         /*     200px;*/
41         /*    height: 200px;*/
42         /*    background-color: red;*/
43         /*    position: absolute;*/
44         /*    top: 50%;*/
45         /*    left: 50%;*/
46         /*    margin-left: -100px;*/
47         /*    margin-top: -100px;*/
48         /*}*/
49 
50         /*第三种方式：子元素绝对定位+transform:translate左上负偏移自身的一半
51         父元素设置为相对定位，子元素设置为绝对定位，并且子元素的上左的偏移都是50%，
52         然后设置transform: translate(-50%,-50%) 来左上负偏移自身的一半
53         */
54         /*.parent_box{*/
55         /*     400px;*/
56         /*    height: 400px;*/
57         /*    background-color: lightseagreen;*/
58         /*    position: relative;*/
59         /*}*/
60         /*.child_box{*/
61         /*     200px;*/
62         /*    height: 200px;*/
63         /*    background-color: red;*/
64         /*    position: absolute;*/
65         /*    top: 50%;*/
66         /*    left: 50%;*/
67         /*    transform: translate(-50%,-50%);*/
68         /*}*/
69 
70         /*第四种方式：弹性盒子
71         将父元素设置成弹性盒子，然后将弹性盒子的水平排列方式（justify-content）和垂直排列方式（align-items）都设置为center即可
72         */
73         .parent_box{
74             width: 400px;
75             height: 400px;
76             background-color: lightseagreen;
77             display: flex;
78             justify-content: center;
79             align-items: center;
80         }
81         .child_box{
82             width: 200px;
83             height: 200px;
84             background-color: red;
85         }
86     </style>
87 </head>
88 <body>
89 <div class="parent_box">
90     <div class="child_box"></div>
91 </div>
92 </body>
93 </html>

查看全文

相关阅读:
tomcat7的catalina.sh配置说明
 nginx防攻击的简单配置
 linux系统自签发免费ssl证书，为nginx生成自签名ssl证书
 mysql ERROR 1045 (28000): Access denied for user 'root'@'localhost'
/var/log/secure 文件清空
 Linux日志文件
 记一次网站被挂马处理
 Uedit32对文本进行回车换行
 安装mysql血泪史。
mysql-8.0.19安装教程（Windows）

原文地址：https://www.cnblogs.com/Renyi-Fan/p/12529320.html

CSS3疑难问题---7、实现元素水平垂直居中

CSS3疑难问题---7、实现元素水平垂直居中

一、总结

一句话总结：

方式一：绝对定位+margin: auto;：子元素绝对定位，并且偏移全为0，margin设置为auto

方式二：绝对定位+margin自身负偏移：子元素绝对定位且左（left）上（top）偏移50%，再margin负偏移左（left）上（top）自身的一半

方式三：绝对定位+transform:translate 平移方式：子元素绝对定位且左（left）上（top）偏移50%，使用transform:translate实现自身左上偏移50%

方式四：弹性盒子：设置父元素为弹性盒子，并且设置主轴对齐方式（justify-content）和侧轴对齐方式（align-items）都为center

1、实现元素水平垂直居中 方式一：绝对定位+margin: auto;？

子元素绝对定位，并且偏移全为0，margin设置为auto

2、实现元素水平垂直居中 方式二：绝对定位+margin自身负偏移？

子元素绝对定位且左（left）上（top）偏移50%，再margin负偏移左（left）上（top）自身的一半

3、实现元素水平垂直居中 方式三：绝对定位+transform:translate 平移方式？

子元素绝对定位且左（left）上（top）偏移50%，使用transform:translate实现自身左上偏移50%

4、实现元素水平垂直居中 方式四：弹性盒子？

设置父元素为弹性盒子，并且设置主轴对齐方式（justify-content）和侧轴对齐方式（align-items）都为center

二、实现元素水平垂直居中

方式一：绝对定位+margin: auto;：

方式二：绝对定位+margin自身负偏移：

方式三：绝对定位+transform:translate 平移方式：

方式四：弹性盒子：

1、实现元素水平垂直居中方式一：绝对定位+margin: auto;？

2、实现元素水平垂直居中方式二：绝对定位+margin自身负偏移？

3、实现元素水平垂直居中方式三：绝对定位+transform:translate 平移方式？

4、实现元素水平垂直居中方式四：弹性盒子？