标签：居中 color 50% 300px height 垂直 width background 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     }

 

 

 

 

 

 

 

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

 

 

 

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%父元素高度

 

 

 

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     }

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

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

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

 

标签：居中,color,50%,300px,height,垂直,width,background,CSS
来源： https://www.cnblogs.com/memeflyfly/p/14288734.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。