css中有哪些方法可以实现垂直居中

互联网 20-3-23

css实现垂直居中的方法如下：

1、利用line-height实现居中，这种方法适合纯文字类的；

<!-- css --> <style> .parents {   height: 400px;   line-height: 400px;   width: 400px;   border: 1px solid red;   text-align: center; }  .child {   background-color: blue;   color: #fff; }  </style> </head>  <body> <!-- html --> <div class="parents">    <span class="child">css布局,实现垂直居中</span> </div> </body>

（推荐教程：CSS教程）

2、通过设置父容器相对定位，子级设置绝对定位，标签通过margin实现自适应居中；

<!-- css --> <style> .parents {   height: 400px;   width: 400px;   border: 1px solid red;   position: relative; }  .child {   width: 200px;   height: 100px;   line-height: 100px;   text-align: center;   color: #fff;   background-color: blue;   /* 四个方向设置为0, 然后通过margin为auto自适应居中 */   position: absolute;   top: 0;   right: 0;   bottom: 0;   left: 0;   margin: auto; }  </style> </head>  <body> <!-- html --> <div class="parents">   <span class="child">css布局,实现垂直居中</span> </div> </body>

3、弹性布局flex 父级设置display: flex; 子级设置margin为auto实现自适应居中；

  <!-- css -->   <style>     .parents {       height: 400px;       width: 400px;       border: 1px solid red;       display: flex;     }      .child {       width: 200px;       height: 100px;       line-height: 100px;       text-align: center;       color: #333;       background-color: yellow;       margin: auto;   }  </style> </head>  <body>  <!-- html -->   <div class="parents">     <span class="child">css布局,实现垂直居中</span>   </div> </body>

效果：

4、父级设置相对定位，子级设置绝对定位，并且通过位移transform实现；

  <!-- css -->   <style>     .parents {       height: 400px;       width: 400px;       border: 1px solid red;       position: relative;     }      .child {       width: 200px;       height: 100px;       line-height: 100px;       text-align: center;       color: #fff;       background-color: green;       position: absolute;       top: 50%;       left: 50%;       transform: translate(-50%, -50%);     }   </style> </head>  <body>   <!-- html -->   <div class="parents">     <span class="child">css布局,实现垂直居中</span>   </div> </body>

效果：

5、父级设置弹性盒子，并设置弹性盒子相关属性；

 <!-- css -->  <style>     .parents {       height: 400px;       width: 400px;       border: 1px solid red;       display: flex;       justify-content: center; /* 水平 */       align-items: center; /* 垂直 */     }      .child {       width: 200px;       height: 100px;       color: black;       background-color: orange;     }   </style> </head>  <body>   <!-- html -->   <div class="parents">     <span class="child"></span>   </div> </body>

效果：

6、网格布局，父级通过转换成表格形式，然后子级设置行内或行内块实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

效果：

 <!-- css -->  <style>     .parents {       height: 400px;       width: 400px;       border: 1px solid red;       display: table-cell;       text-align: center;       vertical-align: middle;     }      .child {       width: 200px;       height: 100px;       color: #fff;       background-color: blue;       display: inline-block; /* 子元素设置行内或行内块 */     }   </style> </head>  <body>   <!-- html -->   <div class="parents">     <span class="child"></span>   </div> </body>

相关视频教程推荐：css视频教程

以上就是css中有哪些方法可以实现垂直居中的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：垂直居中