search

博客列表 >【归纳】赶紧收藏css实现水平垂直居中的八种快速方法总结

【归纳】赶紧收藏css实现水平垂直居中的八种快速方法总结

　一纸荒凉* Armani
　一纸荒凉* Armani原创
2021年03月31日 11:01:51928浏览

1. 利用text-align实现行内元素居中

行内元素居中就很简单，只需要设置一下元素的text-align和行高

  1.        .box {
  2.             height: 300px;
  3.             width: 300px;
  4.             background-color: pink;
  5.             margin: 100px auto;
  6.         }
  8.         .box p {
  9.             text-align: center;
  10.             line-height: 300px;
  11.         }

2.利用定位再结合margin：auto实现

块元素的水平居中利用margin就可以实现，但垂直居中显然不太好实现。

  1.         .box {
  2.             height: 300px;
  3.             width: 300px;
  4.             background-color: pink;
  5.             margin: 100px auto;
  6.             position: relative;
  7.         }
  9.         .box div {
  10.             width: 30px;
  11.             height: 30px;
  12.             background-color: red;
  13.             position: absolute;
  14.             top: 0;
  15.             bottom: 0;
  16.             left: 0;
  17.             right: 0;
  18.             margin: auto;
  19.         }

3.已知宽高利用负margin和定位配合

  1.         .box {
  2.             height: 300px;
  3.             width: 300px;
  4.             background-color: pink;
  5.             margin: 100px auto;
  6.             position: relative;
  7.         }
  9.         .box div {
  10.             width: 30px;
  11.             height: 30px;
  12.             background-color: red;
  13.             position: absolute;
  14.             left: 50%;
  15.             top: 50%;
  16.             margin-left: -15px;
  17.             margin-top: -15px;
  18.         }

4. 定位通过计算元素宽高实现居中

  1. <!DOCTYPE html>
  2. <head>
  3.     <title>absolute+margin计算元素宽高判断居中</title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <style>
  6.         .content {
  7.             width: 300px;
  8.             height: 300px;
  9.             border: 1px solid #109D71;
  10.             position: relative;
  11.         }
  13.         .box {
  14.             position: absolute;
  15.             width: 100px;
  16.             height: 100px;
  17.             /* top: 50%;
  18.             left: 50%;
  19.             margin-top: -50px;
  20.             margin-left: -50px; */
  21.             top: calc(50% - 50px);
  22.             left: calc(50% - 50px);
  23.             background: #109D71;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class="content">
  29.         <div class="box">
  30.         </div>
  31.     </div>
  32. </body>
  33. </html>

5.通过translate将元素移动自身的50%

translate(-50%,-50%) 属性：向上（x轴）和左（y轴），移动自身长宽的 50%，使其居于中心位置。
top: 50%;left: 50%;：是以窗口左上角为原点，需要减掉自身宽高的一半，才能居中。
与使用margin实现居中不同的是，margin必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate函数中的百分比是相对于自身宽高的百分比。

  1. <!DOCTYPE html>
  2. <head>
  3.     <title>absolute+translate</title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <style>
  6.         .content {
  7.             width: 300px;
  8.             height: 300px;
  9.             border: 1px solid #109D71;
  10.             position: relative;
  11.         }
  13.         .box {
  14.             position: absolute;
  15.             width: 100px;
  16.             height: 100px;
  17.             top: 50%;
  18.             left: 50%;
  19.             transform: translate(-50%, -50%);
  20.             background: #109D71;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="content">
  26.         <div class="box">
  27.         </div>
  28.     </div>
  29. </body>
  30. </html>

6.flex 弹性布局实现

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>flex布局</title>
  6.         <style>
  7.             .content {
  8.                 width: 300px;
  9.                 height: 300px;
  10.                 margin: 50px;
  11.                 border: 1px solid #109D71;
  12.                 display: flex;
  13.                 align-items: center;
  14.                 justify-content: center;
  16.             }
  17.             .box{
  18.                 width: 150px;
  19.                 height: 150px;
  20.                 background-color: #109D71;
  21.                 text-align: center;
  22.                 margin: 0 auto;
  23.                 display: flex;
  24.                 align-items: center;
  25.                 justify-content: center;
  26.             }
  27.         </style>
  28.     </head>
  29.     <body>
  30.         <div class="content">
  31.             <div class="box">
  32.                 水平垂直居中
  33.             </div>
  34.         </div>
  35.     </body>
  36. </html>

7.grid网格布局实现

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>flex布局</title>
  7.     <style>
  8.         .content {
  9.             width: 300px;
  10.             height: 300px;
  11.             margin: 50px;
  12.             border: 1px solid #109D71;
  13.             display: grid;
  14.             place-items: center;
  15.             place-content: center;
  16.         }
  18.         .box {
  19.             width: 150px;
  20.             height: 150px;
  21.             background-color: #109D71;
  22.             text-align: center;
  23.             margin: 0 auto;
  24.             display: grid;
  25.             place-items: center;
  26.         }
  27.     </style>
  28. </head>
  30. <body>
  31.     <div class="content">
  32.         <div class="box">
  33.             水平垂直居中
  34.         </div>
  35.     </div>
  36. </body>
  38. </html>

8.利用display:table-cell属性来实现

display:table-cell;结合vertical-align: middle;使用实现垂直居中，margin:0 atuo;可以实现子元素的水平居中。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>table-cell居中</title>
  6.         <style type="text/css">
  7.             .content{
  8.                 border: 1px solid blue;
  9.                 display: table;
  10.                 margin: 50px auto;
  11.             }
  12.             .table{
  13.                 height: 300px;
  14.                 width: 300px;
  15.                 display: table-cell;
  16.                 vertical-align: middle;
  17.                 border: 1px solid red;
  18.             }
  19.             .box{
  20.                 height: 150px;
  21.                 width: 150px;
  22.                 background: #109D71;
  23.                 margin: 0 auto;
  24.                 display: table;
  25.             }
  26.             .word{
  27.                 display: table-cell;
  28.                 vertical-align: middle;
  29.                 text-align: center;
  30.             }
  31.         </style>
  32.     </head>
  33.     <body>
  34.         <div class="content">
  35.             <div class="table">
  36.                 <div class="box">
  37.                     <div class="word">
  38.                         垂直水平居中
  39.                     </div>
  40.                 </div>
  41.             </div>
  42.         </div>
  43.     </body>
  44. </html>

以上八种方法均可以实现水平垂直居中对齐，具体实现方法根据情况而使用！

上一条：使用grid实现一个12列栅格布局的组件,并grid布局仿写一个页面下一条：CSS-02盒模型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多