CSS垂直居中的方法

CSS垂直居中的方法

1.通过flex布局实现

1   <div id="out">
2     <div id="in"></div>
3   </div>
 1     #out {
 2       width: 300px;
 3       height: 300px;
 4       background-color: aqua;
 5       display: flex;
 6     }
 7 
 8 
 9     #in {
10       width: 50%;
11       height: 50%;
12       background-color: aquamarine;
13       align-self: center;
14     }

 

 

 

 

 CSS垂直居中的方法

 

 

 如果同时想水平居中,可以在父元素中加入 'justify-content: center'

CSS垂直居中的方法

 

 

 

2.通过伪元素来实现

1   <div id="out">
2     <div id="in"></div>
3   </div>
 1     #out {
 2       width: 300px;
 3       height: 300px;
 4       background-color: aqua;
 5     }
 6 
 7     #out::before {
 8       content: '';
 9       height: 100%;
10       display: inline-block;
11       vertical-align: middle;
12 
13     }
14 
15 
16     #in {
17       width: 50%;
18       height: 50%;
19       background-color: aquamarine;
20       display: inline-block;
21       vertical-align: middle;
22     }

 

子元素和伪类都要加上:

display: inline-block和vertical-align: middle

伪类元素还要设置100%父元素高度

CSS垂直居中的方法

 

 

 

3.子绝父相利用位移

1   <div id="out">
2     <div id="in"></div>
3   </div>
 1     #out {
 2       width: 300px;
 3       height: 300px;
 4       background-color: aqua;
 5       position: relative;
 6     }
 7 
 8     #in {
 9       width: 100px;
10       height: 100px;
11       background-color: aquamarine;
12       position: absolute;
13       top: 50%;
14       /* margin-top: -50px; */
15       transform: translateY(-50%);
16     }

CSS垂直居中的方法

先使用top: 50%,子元素的上面一条边与父元素的中间线对齐,

再使用transform,向上位移半个子元素的宽度的距离。

或使用margin-top,向上位移半个子元素的宽度的距离。

CSS垂直居中的方法

 

上一篇:记一次自己动手实现一个简单神经网络


下一篇:float——都变行内块