资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/css水平垂直居中

css水平垂直居中

SoapEye / 3044人阅读

摘要：上面达不到需求，可以考虑使用定位，移动端能使用就使用垂直居中，单行文本，使用等于父元素高度，如果不行，就可以设置父元素，能解决一大部分问题，如果还不行就考虑定位配合，使用。

1.CSS的水平居中，

　　1.1 父元素是块状元素，子元素为行内元素的居中，直接设置text-aglin: center ,常见的文本，span 标签，button,img等行内元素都是可以使其水平居中的

　　　　

</>复制代码 
  1. .box{
  2.             text-align: center;
  3.         }
  4. <div class="box">
  5.         <span>11111span>
  6.         <button>123button>
  7.     div>

　　1.2 父元素为块状元素，子元素也为块状元素

　　　　1.2.1 子元素宽度已知，则可以设置子元素 margin 0 auto,就可以使子元素相对于父元素水平居中

</>复制代码 
  1. <style>
  2.         .box{
  3.             background-color: pink;
  4.         }
  5.         .con-box{
  6.             width: 300px;
  7.             margin: 0 auto;
  8.             height: 30px;
  9.             background-color: aqua;
  10.         }
  11.     style>
  12. <div class="box">
  13.         <div class="con-box">
  14.         div>
  15.     div>

　　1.3  父元素为块状元素，子元素为块状元素宽度不定，直接设置子元素display:inline,　　然后设置 父元素的text-aglin:center

</>复制代码 
  1. <style>
  2.         .box{
  3.             background-color: pink;
  4.             text-align: center
  5.         }
  6.         .con-box{
  7.             display: inline;
  8.         }
  9.     style>
  10. <div class="box">
  11.         <div class="con-box">
  12.             111111
  13.         div>
  14.     div>

 

　　　　注： 使用弹性布局，使用定位，都是可以使子元素相对于父元素水平居中的

2.垂直居中

　　2.1 父元素为块状元素，子元素为行内元素，如单行文本，直接设置父元素的line-height 等于父元素的高度，

</>复制代码 
  1. <style>
  2.         .box{
  3.             background-color: pink;
  4.             height: 50px;
  5.             line-height: 50px;
  6.         }
  7.         .con span{
  8.             line-height: 50px;
  9.         }
  10.     style>
  11. <div class="box">
  12.         <span> 111111span>
  13.     div>

　　2.2 父元素为块状元素，子元素为多行文本，则设置父元素的line-height 等于父元素高度除于行数，

</>复制代码 
  1. .box{
  2.             background-color: pink;
  3.             height: 50px;
  4.             line-height: 25px;
  5.         }
  6.         .con span{
  7.             line-height: 50px;
  8.         }
  9. <div class="box">
  10.         <span> 111111span><br>
  11.         <span> 111111span><br>
  12.     div>

　　2.3 父元素为块状元素，子元素也为块状元素，

　　　　2.3.1 子元素高度未知，改变父元素的display 属性 设置为 table-cell,然后设置vertical-align:middle;

</>复制代码 
  1. <style>
  2.         .box{
  3.             background-color: pink;
  4.             height: 50px;
  5.             display: table-cell;
  6.             vertical-align:middle;
  7.         }
  8.         .box .con-box{
  9.             background-color: aqua;
  10.         }
  11.     style>
  12. <div class="box">
  13.         <div class="con-box"> 
  14.             1111
  15.         div>
  16.     div>

　　　　2.3.2 子元素高度已知，则设置margin-top，元素高度减去子元素高度除于2; 记住一定要设置父元素的overflow: hidden; 

　　　　　　（相邻块状元素 margin会共享，取最大值，不设置overflow: hidden，子元素的margin-top:10px 会跑到父元素上）

</>复制代码 
  1. <style>
  2.         .box{
  3.             background-color: pink;
  4.             height: 50px;
  5.             overflow: hidden;           
  6.      }
  7.         .box .con-box{
  8.             margin-top: 10px;
  9.             height: 30px;
  10.             line-height: 30px;
  11.             background-color: aqua;
  12.         }
  13.     style>
  14. <div class="box">
  15.         <div class="con-box"> 
  16.             1111
  17.         div>
  18.     div>

　　　　2.3.3 子元素为图片，直接可以设置父元素display: table-cell; vertical-align: middle;

</>复制代码 
  1. <style>
  2.         .box{
  3.             background-color: pink;
  4.             height: 450px;
  5.             display: table-cell; 
  6.             vertical-align: middle;         
  7.      }
  8. style>

　　2.3.4 子元素为多个，比如图片，外加别的行内元素，使用2.3.3，文本可以不用改变，必读给图片加 vertical-align: middle;

</>复制代码 
  1.     <style>
  2.         .box{
  3.             background-color: pink;
  4.             height: 450px;
  5.             display: table-cell; 
  6.             vertical-align: middle;         
  7.      }
  8.      img{
  9.          vertical-align: middle
  10.      }
  11.     style>
  12. <div class="box">
  13.         <img src="../xunguang-4.jpg" alt="">
  14.         <span>12123123span>
  15.         1111111
  16.     div>

3.CSS 水平垂直居中 上面两两组和使可以实现的，我们主要看一下定位和flex 实现水平垂直居中

　　3.1子元素高度未知，高度已知的块状元素水平垂直居中，（宽度未知，块状元素肯定使占满整行的，就不存在水平居中了）

　　　　3.1.1使用定位配置，配合margin 0 auto ,top 50%,宽度未知，只能使用transform:translateY(-50%);

</>复制代码 
  1.   <style>
  2.         .box{
  3.             background-color: pink;
  4.             height: 450px;  
  5.             position: relative; // relative 默认沾满整行，absolute话，未设置宽度则由子元素撑开    
  6.             overflow: hidden; 
  7.         }
  8.         .box .con-box{
  9.             position: relative;
  10.             width: 300px;
  11.             margin: 0 auto;
  12.             background-color: aqua;
  13.             top:50%;
  14.             transform: translateY(-50%);
  15.         }
  16.     style>
  17. <div class="box">
  18.         <div class="con-box">
  19.             123123123123
  20.             <br>
  21.             1222222222
  22.         div>
  23.     div>

　　　　3.1.2，使用定位，子元素 left 0 right 0 top 0 bottom 0 margin auto （一定要注意父子元素的定位属性）

</>复制代码 
  1. <style>
  2.         .box{
  3.             background-color: pink;
  4.             height: 450px;  
  5.             position: relative; /* 父元素一定为relative */   
  6.             overflow: hidden; 
  7.         }
  8.         .box .con-box{
  9.             position: absolute; /*  *子元素一定 为absolete*/
  10.             width: 300px;
  11.             background-color: aqua;
  12.             top:0;
  13.             left: 0;
  14.             right: 0;
  15.             bottom: 0;
  16.             margin: auto;
  17.         }
  18.     style>
  19. <div class="box">
  20.         <div class="con-box">
  21.             123123123123
  22.             <br>
  23.             1222222222
  24.         div>
  25.     div>

　　3.2 ，子元素宽度，高度都已知，3.1 上的两种方法都适用宽度高度已经的子元素水平垂直居中

　　　　3.2.1 margin-top: -width/2 具体的值， transform: translateY(-50%) 这个有兼容性问题，需要ie9以上，具体宽度值则无兼容性问题，

</>复制代码 
  1. <style>
  2.                 .box{
  3.             background-color: pink;
  4.             height: 450px;  
  5.             position: relative; 
  6.             overflow: hidden; 
  7.         }
  8.         .box .con-box{
  9.             position: relative;
  10.             width: 300px;
  11.             height: 400px;
  12.             margin: 0 auto;
  13.             background-color: aqua;
  14.             top:50%;
  15.             margin-top: -200px
  16.         }
  17.     style>
  18. <div class="box">
  19.         <div class="con-box">
  20.             123123123123
  21.             <br>
  22.             1222222222
  23.         div>
  24.     div>

　　　　上面方法的变化版

</>复制代码 
  1. <style>
  2.                 .box{
  3.             background-color: pink;
  4.             height: 450px;  
  5.             position: relative; 
  6.             overflow: hidden; 
  7.         }
  8.         .box .con-box{
  9.             position: relative;
  10.             width: 300px;
  11.             height: 400px;
  12.             background-color: aqua;
  13.             top:50%;
  14.             left: 50%;
  15.             margin-top: -200px;
  16.             margin-left: -150px;
  17.         }
  18.     style>
  19. <div class="box">
  20.         <div class="con-box">
  21.             123123123123
  22.             <br>
  23.             1222222222
  24.         div>
  25.     div>

4 flex 水平垂直居中

　　flex 主轴上居中，交叉轴上居中，flex 有很大的兼容性问题，一般用于移动端，很简单

</>复制代码 
  1. <style>
  2.                 .box{
  3.             background-color: pink;
  4.             height: 450px;  
  5.             display: flex;
  6.             justify-content: center;
  7.             align-items: center
  8.         }
  9.         .box .con-box{
  10.             width: 300px;
  11.             height: 400px;
  12.             background-color: aqua;
  13.         }
  14.     style>
  15. <div class="box">
  16.         <div class="con-box">
  17.             123123123123
  18.             <br>
  19.             1222222222
  20.         div>
  21.     div>

 　　　　多个子元素也一样实现

　　　　子元素可以多带带设置对其方式

</>复制代码 
  1. <style>
  2.                 .box{
  3.             background-color: pink;
  4.             height: 450px;  
  5.             display: flex;
  6.             justify-content: center;
  7.             align-items: center
  8.         }
  9.         .box .con-box{
  10.             width: 200px;
  11.             height: 400px;
  12.             background-color: aqua;
  13.         }
  14.         .box .con-box2{
  15.             width: 200px;
  16.             height: 400px;
  17.             background-color: lightcyan;
  18.         }
  19.         .box .con-box3{
  20.             width: 200px;
  21.             height: 400px;
  22.             background-color: gold;
  23.             align-self: flex-end;
  24.         }
  25.     style>
  26. <div class="box">
  27.         <div class="con-box">
  28.             123123123123
  29.             <br>
  30.             1222222222
  31.         div>
  32.         <div class="con-box2">
  33.             123123123123
  34.             <br>
  35.             1222222222
  36.         div>
  37.         <div class="con-box3">
  38.             123123123123
  39.             <br>
  40.             1222222222
  41.         div>
  42.     div>

   总结 

　　　1.水平居中，能使用margin: 0 auto ,这最简单的，不能的话就把子元素转化成inline,然后使用text-aglin：center,无兼容性问题。

　　　　上面达不到需求，可以考虑使用定位，移动端能使用flex 就使用flex

　　   2. 垂直居中，单行文本，使用line-height 等于父元素高度，如果不行，就可以设置父元素display:table-cell，vertical-align: middle;

　　　　能解决一大部分问题，如果还不行就考虑定位配合margin-top:-width/2，使用margin。移动端能使用flex 就使用flex.

　　如果您还有更好的方法，欢迎给我留言，共同学习，共同进步。up

云服务器 GPU云服务器 水平垂直居中 垂直居中 实现垂直居中 文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/998.html

相关文章

  • CSS居中完全指南——构建CSS居中决策树

    摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

    cc17 评论0 收藏0

  • CSS居中完全指南——构建CSS居中决策树

    摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

    AlienZHOU 评论0 收藏0

  • 【基础】这15种CSS居中的方式，你都用过哪几种？

    摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。 简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

    Apollo 评论0 收藏0

  • 【基础】这15种CSS居中的方式，你都用过哪几种？

    摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。 简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

    Scholer 评论0 收藏0

  • 【基础】这15种CSS居中的方式，你都用过哪几种？

    摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。 简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

    mayaohua 评论0 收藏0

  • 【前端】这可能是你看过最全的css居中解决方案了~

    摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案 适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

    csRyan 评论0 收藏0

发表评论

登陆后可评论

0条评论

SoapEye

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<