CSS水平居中+垂直居中+水平/垂直居中的方法总结

目录

水平居中 

  行内元素

  块级元素

       方案一:(分宽度定不定两种情况)

       方案二:使用定位属性

       方案三:使用flexbox布局实现(宽度定不定都可以)

垂直居中

    单行的行内元素

    多行的行内元素

    块级元素

水平垂直居中

    已知高度和宽度的元素

    未知高度和宽度的元素

        方案一:使用定位属性

        方案二:使用flex布局实现


水平居中 

  • 行内元素

首先看它的父元素是不是块级元素,如果是,则直接给父元素设置 text-align: center; 


 
 
  1. <style>
  2. #father {
  3. width: 500px;
  4. height: 300px;
  5. background-color: skyblue;
  6. text-align: center;
  7. }
  8. </style>
  9. <div id="father">
  10.     <span id="son">我是行内元素 </span>
  11. </div>

如果不是,则先将其父元素设置为块级元素,再给父元素设置 text-align: center;


 
 
  1. <style>
  2. #father {
  3. display: block;
  4. width: 500px;
  5. height: 300px;
  6. background-color: skyblue;
  7. text-align: center;
  8. }
  9. </style>
  10. <span id="father">
  11.     <span id="son">我是行内元素 </span>
  12. </span>

效果:


  •  块级元素

方案一:(分宽度定不定两种情况)

定宽度:需要谁居中,给其设置 margin: 0 auto; (作用:使盒子自己居中)


 
 
  1. <style>
  2. #father {
  3. width: 500px;
  4. height: 300px;
  5. background-color: skyblue;
  6. }
  7. #son {
  8. width: 100px;
  9. height: 100px;
  10. background-color: green;
  11. margin: 0 auto;
  12. }
  13. </style>
  14. <div id="father">
  15.     <div id="son">我是块级元素 </div>
  16. </div>

效果:

 不定宽度:默认子元素的宽度和父元素一样,这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素,给父元素设置 text-align: center; 


 
 
  1. <style>
  2. #father {
  3. width: 500px;
  4. height: 300px;
  5. background-color: skyblue;
  6. text-align: center;
  7. }
  8. #son {
  9. background-color: green;
  10. display: inline;
  11. }
  12. </style>
  13. <div id="father">
  14.     <div id="son">我是块级元素 </div>
  15. </div>

效果:(将#son转换成行内元素,内容的高度撑起了#son的高度,设置高度无用)


方案二:使用定位属性

首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的left:50%,即让子元素的左上角水平居中;

定宽度:设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);


 
 
  1. <style>
  2. #father {
  3. width: 500px;
  4. height: 300px;
  5. background-color: skyblue;
  6. position: relative;
  7. }
  8. #son {
  9. width: 100px;
  10. height: 100px;
  11. background-color: green;
  12. position: absolute;
  13. left: 50%;
  14. margin-left: - 50px;
  15. }
  16. </style>
  17. <div id="father">
  18. <div id="son">我是块级元素 </div>
  19. </div>

不定宽度:利用css3新增属性transform: translateX(-50%);


 
 
  1. <style>
  2. #father {
  3. width: 500px;
  4. height: 300px;
  5. background-color: skyblue;
  6. position: relative;
  7. }
  8. #son {
  9. height: 100px;
  10. background-color: green;
  11. position: absolute;
  12. left: 50%;
  13. transform: translateX(-50%);
  14. }
  15. </style>
  16. <div id="father">
  17. <div id="son">我是块级元素 </div>
  18. </div>

效果:


方案三:使用flexbox布局实现(宽度定不定都可以)

使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;


 
 
  1. <style>
  2. #father {
  3. width: 500px;
  4. height: 300px;
  5. background-color: skyblue;
  6. display: flex;
  7. justify-content: center;
  8. }
  9. #son {
  10. width: 100px;
  11. height: 100px;
  12. background-color: green;
  13. }
  14. </style>
  15. <div id="father">
  16. <div id="son">我是块级元素 </div>
  17. </div>

效果: 


垂直居中

  • 单行的行内元素

只需要设置单行行内元素的"行高等于盒子的高"即可;


 
 
  1. <style>
  2. #father {
  3. width: 500px;
  4. height: 300px;
  5. background-color: skyblue;
  6. }
  7. #son {
  8. background-color: green;
  9. height: 300px;
  10. }
  11. </style>
  12. <div id="father">
  13. <span id="son">我是单行的行内元素 </span>
  14. </div>

效果:

 


  • 多行的行内元素

使用给父元素设置display:table-cell;vertical-align: middle;属即可;


 
 
  1. <style>
  2. #father {
  3. width: 500px;
  4. height: 300px;
  5. background-color: skyblue;
  6. display: table-cell;
  7. vertical-align:middle;
  8. }
  9. #son {
  10. background-color: green;
  11. }
  12. </style>
  13. <div id="father">
  14. <span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素 </span>
  15. </div>

效果:


  •  块级元素

方案一:使用定位

首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的top: 50%,即让子元素的左上角垂直居中;

定高度:设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);


 
 
  1. <style>
  2. #father {
  3. width: 500px;
  4. height: 300px;
  5. background-color: skyblue;
  6. position: relative;
  7. }
  8. #son {
  9. height: 100px;
  10. background-color: green;
  11. position: absolute;
  12. top: 50%;
  13. margin-top: - 50px;
  14. }
  15. </style>
  16. <div id="father">
  17. <div id="son">我是块级元素 </div>
  18. </div>

不定高度:利用css3新增属性transform: translateY(-50%);


 
 
  1. <style>
  2. #father {
  3. width: 500px;
  4. height: 300px;
  5. background-color: skyblue;
  6. position: relative;
  7. }
  8. #son {
  9. width: 100px;
  10. background-color: green;
  11. position: absolute;
  12. left: 50%;
  13. transform: translateY(-50%);
  14. }
  15. </style>
  16. <div id="father">
  17. <div id="son">我是块级元素 </div>
  18. </div>

效果:


方案二:使用flexbox布局实现(高度定不定都可以)

使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;


 
 
  1. <style>
  2. #father {
  3. width: 500px;
  4. height: 300px;
  5. background-color: skyblue;
  6. display: flex;
  7. align-items: center;
  8. }
  9. #son {
  10. width: 100px;
  11. height: 100px;
  12. background-color: green;
  13. }
  14. </style>
  15. <div id="father">
  16. <div id="son">我是块级元素 </div>
  17. </div>

效果: 


水平垂直居中

  • 已知高度和宽度的元素

方案一:设置父元素为相对定位,给子元素设置绝对定位,top: 0; right: 0; bottom: 0; left: 0; margin: auto;


 
 
  1. <style>
  2. #father {
  3. width: 500px;
  4. height: 300px;
  5. background-color: skyblue;
  6. position: relative;
  7. }
  8. #son {
  9. width: 100px;
  10. height: 100px;
  11. background-color: green;
  12. position: absolute;
  13. top: 0;
  14. right: 0;
  15. bottom: 0;
  16. left: 0;
  17. margin: auto;
  18. }
  19. </style>
  20. <div id="father">
  21. <div id="son">我是块级元素 </div>
  22. </div>

效果:


方案二:设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;


 
 
  1. <style>
  2. #father {
  3. width: 500px;
  4. height: 300px;
  5. background-color: skyblue;
  6. position: relative;
  7. }
  8. #son {
  9. width: 100px;
  10. height: 100px;
  11. background-color: green;
  12. position: absolute;
  13. left: 50%;
  14. top: 50%;
  15. margin-left: - 50px;
  16. margin-top: - 50px;
  17. }
  18. </style>
  19. <div id="father">
  20. <div id="son">我是块级元素 </div>
  21. </div>

效果:


  • 未知高度和宽度的元素

方案一:使用定位属性

设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);


 
 
  1. <style>
  2. #father {
  3. width: 500px;
  4. height: 300px;
  5. background-color: skyblue;
  6. position: relative;
  7. }
  8. #son {
  9. background-color: green;
  10. position: absolute;
  11. left: 50%;
  12. top: 50%;
  13. transform: translateX(-50%) translateY(-50%);
  14. }
  15. </style>
  16. <div id="father">
  17. <div id="son">我是块级元素 </div>
  18. </div>

效果:


方案二:使用flex布局实现

设置父元素为flex定位,justify-content: center; align-items: center;


 
 
  1. <style>
  2. #father {
  3. width: 500px;
  4. height: 300px;
  5. background-color: skyblue;
  6. display: flex;
  7. justify-content: center;
  8. align-items: center;
  9. }
  10. #son {
  11. background-color: green;
  12. }
  13. </style>
  14. <div id="father">
  15. <div id="son">我是块级元素 </div>
  16. </div>

效果:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值