本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2024-11(4)

CSS子元素相对父元素水平垂直居中

发布于2021-01-31 14:10     阅读(1140)     评论(0)     点赞(16)     收藏(2)


1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效。

 

  1. #div1{
  2. width: 300px;
  3. height: 300px;
  4. background-color: antiquewhite;
  5. }
  6. #div1 p {
  7. width: 100px;
  8. height: 100px;
  9. background-color: aqua;
  10. /*float: left; !*如果设置了浮动,则自动居中就会失效。*!*/
  11. margin: 0 auto;
  12. }
  13. <div id="div1">
  14. <p></p>
  15. </div>

 

2. 水平居中,子父元素宽度固定,父元素设置 text-align: center; 
子元素设置 display: inline-block; 子元素不能设置浮动,否则居中失效。 
如果将元素设置为 inline , 则元素的宽高设置会失效,这就需要内容来撑起盒子

 

  1. #div2 {
  2. width: 300px;
  3. height: 300px;
  4. background-color: antiquewhite;
  5. /*position: relative;*/
  6. text-align: center;
  7. }
  8. #div2 p{
  9. width: 100px;
  10. height: 100px;
  11. background-color: aqua;
  12. margin: 0;
  13. /*float: left; !*如果设置了浮动,则自动居中就会失效。*!*/
  14. display: inline-block;
  15. /*display: inline;*/
  16. /*display: inline-flex;*/
  17. }
  18. <div id="div2">
  19. <h4>其他内容</h4>
  20. <p></p>
  21. <h3>其他内容</h3>
  22. </div>

 

 

1. 水平垂直居中,子元素相对于父元素绝对定位, 
子元素top,left设置为50%,子元素margin的top,left减去自身高,宽的一半。

 

  1. #div3 {
  2. width: 300px;
  3. height: 300px;
  4. background-color: antiquewhite;
  5. position: relative;
  6. }
  7. #div3 p {
  8. width: 100px;
  9. height: 100px;
  10. background-color: aqua;
  11. /*margin-top: 10%; !*百分比相对于父元素*!*/
  12. /*padding-top: 10%; !*百分比相对于父元素*!*/
  13. position: absolute;
  14. top: 50%;
  15. left: 50%;
  16. margin-top: -50px;
  17. margin-left: -50px;
  18. }
  19. <div id="div3">
  20. <p></p>
  21. <h3>其他内容</h3>
  22. </div>

 

 

2. 水平垂直居中,子元素相对于父元素绝对定位, 
将子元素的top,right,bottom,left均设为0,然后设置子元素 margin: auto;

 

  1. #div4{
  2. width: 300px;
  3. height: 300px;
  4. background-color: antiquewhite;
  5. position: relative;
  6. }
  7. #div4 p{
  8. width: 100px;
  9. height: 100px;
  10. background-color: aqua;
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. bottom: 0;
  15. right: 0;
  16. margin: auto;
  17. }
  18. <div id="div4">
  19. <p></p>
  20. <h3>其他内容</h3>
  21. </div>

 

 

3. 水平垂直居中,父元素设置 display: table-cell; vertical-align: middle; 
子元素设置 margin: auto; 
这种方式是让所有的子元素作为一个整体垂直居中,并不能单独指定某一个子元素居中

 

  1. #div5{
  2. width: 300px;
  3. height: 300px;
  4. background-color: antiquewhite;
  5. display: table-cell;
  6. vertical-align: middle;
  7. }
  8. #div5 p{
  9. width: 100px;
  10. height: 100px;
  11. background-color: aqua;
  12. margin: auto;
  13. }
  14. <div id="div5">
  15. <p></p>
  16. </div>

 

 

4. 水平垂直居中,子元素相对定位,top,let设为50%,transform: translate(-50%, -50%); 
这种方式并不会释放子元素在文档中所占的位置。

 

  1. #div6{
  2. width: 300px;
  3. height: 300px;
  4. background-color: antiquewhite;
  5. }
  6. #div6 p {
  7. width: 100px;
  8. height: 100px;
  9. background-color: aqua;
  10. margin: 0;
  11. position: relative;
  12. top: 50%;
  13. left: 50%;
  14. transform: translate(-50%, -50%);
  15. }
  16. <div id="div6">
  17. <p></p>
  18. <h3>其他内容</h3>
  19. </div>

 

 

5. 水平垂直居中,子元素相对于父元素绝对定位, 
子元素top,let设为50%,transform: translate(-50%, -50%); 
这种方式会释放子元素在文档中所占的位置

  1. #div7{
  2. width: 300px;
  3. height: 300px;
  4. background-color: antiquewhite;
  5. position: relative;
  6. }
  7. #div7 p {
  8. width: 100px;
  9. height: 100px;
  10. background-color: aqua;
  11. margin: 0;
  12. position: absolute;
  13. top: 50%;
  14. left: 50%;
  15. transform: translate(-50%, -50%);
  16. }
  17. <div id="div7">
  18. <p></p>
  19. <h3>其他内容</h3>
  20. </div>

 

 

6. 水平垂直居中,父元素设置 display: flex; justify-content: center; align-items: center; 
justify-content: center; 是让所有的子元素作为一个整体居中。

 

  1. #div8{
  2. width: 300px;
  3. height: 300px;
  4. background-color: antiquewhite;
  5. display: flex;
  6. justify-content: center;
  7. align-items: center;
  8. }
  9. #div8 p{
  10. width: 100px;
  11. height: 100px;
  12. background-color: aqua;
  13. margin: 0;
  14. }
  15. <div id="div8">
  16. <p></p>
  17. </div>

 

 




所属网站分类: 技术文章 > 博客

作者:我喜欢css

链接:http://www.qianduanheidong.com/blog/article/78/ee5592e2c530bc551ff0/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

16 0
收藏该文
已收藏

评论内容:(最多支持255个字符)