用css的垂直居中二十七种方法

傷城~ 2022-09-26 03:25 152阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    </head>
    <body>
    	<h1>第一种</h1>
    	<div style="width:600px;
    			height:600px;
    			background-color: #d75efa;
    			text-align:center;
    			vertical-align: middle;">
    		<div style="line-height:600px;"><!--用行高控制--!>
    			shuahcudh
    		</div>
    	</div>
    </body>
    </html>

![Center][]

![Center 1][]

<!DOCTYPE html>
    <html>
    <body>
    <h2>第二种</h2><!--把div看成表格，让表格元素垂直居中--!>
    <div style="display:table;width:500px;height:500px;">
    <div style="display:table-cell;vertical-align:middle;text-align;center">
    bhcdbhc
    </div>
    </div>
    </body>
    </html>

第3种效果图：

![Center 2][]

第四种：

<html>
    <head>
      <title>垂直居中第四种</title>
      <style>
        .d1{
          width:200px;
          height:200px;
          border:1px solid red;
          position:relative;
          left:0;
          right:0;
        }
        .d2{
          width:100px;
          height:100px;
          border:1px solid blue;
          position:absolute;
          top:0;
          left:0;
          right:0; 
          bottom:0;
          margin:auto;
        }
      </style>
      <link rel="stylesheet" href="css.css" />
      </head>
      <body>
        <div class="d1">
          <div class="d2">
          </div>
        </div>
      </body>
    </html>

第四种效果图：

![Center 3][]

<!DOCTYPE html>
    <head>
      <meta charset="utf-8">
      <title>第五种垂直居中</title>
      <style>
      html,body{
      	height: 100%;
      	margin: 0;
      }
    	body{
    		display: flex;
    		display: -webkit-flex;
    		align-items: center;
    		-ms-flex-align: center;
    		-weblit-align-items: center;
    	}
    	div{
    		width: 200px;
    		height: 300px;
    		border: 1px solid red;
    	}
      </style>
    </head>
    <body>
      <div></div>
    </body>

第五种的效果图：

![Center 4][]

<html>
    <head>
      <title>第6种</title>
      <style>
      .cz{
      width:200px;
      height:200px;
      border:1px solid red;
    }
    
    .inner{
      position: relative;
     top: 50%;
     transform: translateY(-50%);
    }
      </style>
      </head>
      <body>
        <div class="cz">
          <div class="inner">垂直居中</div>
        </div>
      </body>
    </html>

第六种的效果图：

![Center 5][]  
第七种效果图：

![70][]

代码如下：

--------------------

<html>
      <head>
        <title>第七种</title>
        <style>
            .content{
              width:200px;
              line-height:100px;
              margin:auto;
              background-color:#ccc;
              text-align:center;
            }
        </style>
      </head>
      <body>
        <div class='content'>line-hight</div>
      </body>
    </html>

第八种效果图如下：

![70 1][]

代码如下：

.box{
      width: 500px;
      border: 1px solid #f00;
      margin: auto;
      line-height: 200px;
      text-align: center;
    }
    .box2 .content{
      display: inline-block;
      height: auto;
      line-height:1;
      width: 400px;
      background: #ccc;
    }

第九种效果提如下：

![70 2][]

第九种代码如下：

<html>
      <head>
        <title>第九种</title>
      </head>
      <body>
        <div class="box box3">
      <div class="content">
          第九种:before+inline-block</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #bdd;
      margin: auto;
      text-align: center;
    }
    .box::before{
      content:'';
      display: inline-block;
      height: 100%;
      width: 0;
      vertical-align: middle;
    }
    .box .content{
      width: 400px;
      background: #abf;
      display: inline-block;
      vertical-align: middle;
    }

第十种效果图如下：

![70 3][]

第十种代码如下：

<html>
      <head>
        <title>第十种</title>
      </head>
      <body>
        <div class="box box4">
      <div class="content">
        第十种absolute + 负margin  </div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #aee;
      margin: auto;
      position: relative;
    }
    .box4 .content{
      width: 400px;
      background: #dbe;
      height: 70px;
      line-height:70px;
      text-align:center;
      position: absolute;
      top:50%;
      left: 50%;
      margin-left: -200px;
      margin-top: -35px;
    }

第十一种效果图如下：

![70 4][]

第十一点代码如下：

<html>
      <head>
        <title>第十一种</title>
      </head>
      <body>
       <div class="box box6">
      <div class="content">
        第十一种absolute + translate</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #8ac;
      margin: auto;
      position: relative;
    }
    .box6 .content{
      width: 400px;
      background: #de3;
      position: absolute;
      top:50%;
      left: 50%;
      text-align:center;
      transform: translate(-50%, -50%);
    }

第十二种效果图如下：

![70 5][]

第十二种代码如下：

<html>
      <head>
        <title>第十二种</title>
      </head>
      <body>
       <div class="box">
      <div class="content">
        第十二种Flex + :before + flex-grow</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #7eb;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .box:before{
      content: '';
      flex-grow: .5;
    }
    .content{
      width: 400px;
      background: #ebb;
    }

第十三种效果图：

![70 6][]

第十三种代码如下：

<html>
      <head>
        <title>第十三种</title>
      </head>
      <body>
       <div class="box">
      <div class="content">
        第十三种Flex + margin</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #ead;
      margin: auto;
      display: flex;
    }
    .content{
      width: 400px;
      background: #bcf;
      margin: auto;
    }

第十四种效果图如下：

![70 7][]

第十四种代码如下：

<html>
      <head>
        <title>第十四种</title>
      </head>
      <body>
       <div class="box">
      <div class="content">
        第十四种Flex + align-self</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #ade;
      margin: auto;
      display: flex;
      justify-content: center;
    }
    .content{
      width: 400px;
      background: #cdf;
      align-self: center
    }

第十五种效果图如下：

![70 8][]

第十五种代码如下：

<html>
      <head>
        <title>第十五种</title>
      </head>
      <body>
       <div class="box box15">
      <div class="content">
        第十五种Flex + align-content</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #f00;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
    }
    .content{
      width: 400px;
      background: #ccc;
    }
    .box15:before,
    .box15:after{
      content: '';
      display: block;
      width:100%;
    }

第十六种效果图如下：

![70 9][]

第十六种代码如下：

<html>
      <head>
        <title>第十六种</title>
      </head>
      <body>
       <div class="box">
      <div class="content">
        第十六种Grid + template</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #f00;
      margin: auto;
      display: grid;
      grid-template-rows: 1fr auto 1fr;
      grid-template-columns: 1fr auto 1fr;
      grid-template-areas: 
        '. . .'
        '. wei .'
        '. . .';
    }
    .content{
      width: 400px;
      background: #ccc;
      grid-area: wei;
    }

第十七种效果图如下：

![70 10][]

第十七种代码如下：

<html>
      <head>
        <title>第十七种</title>
      </head>
      <body>
       <div class="box">
      <div class="content">
        第十七种Grid + align-items</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #adb;
      margin: auto;
      display: grid;
      justify-content: center;
      align-items: center; 
    }
    .content{
      width: 400px;
      background: #adb;
    }

第十八种效果图如下：

![70 11][]

第十八种代码如下：

<html>
      <head>
        <title>第十八种</title>
      </head>
      <body>
       <div class="box">
      <div class="content">
        第十八种Grid + align-content</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #adb;
       margin: auto;
      display: grid;
      justify-content: center;
      align-content: center;  
    }
    .content{
      width: 400px;
      background: #adb;
    }

第十九种效果图如下：

![70 12][]

第十九种代码如下：

<html>
      <head>
        <title>第十九种</title>
      </head>
      <body>
       <div class="box">
      <div class="content">
        第十九种Grid + align-self</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #adb;
      margin: auto;
      display: grid;
      justify-content: center;
    }
    .content{
      width: 400px;
      background: #adb;
      align-self: center;
    }

第二十种效果图如下：

![70 13][]

第二十种代码如下：

<html>
      <head>
        <title>第二十种</title>
      </head>
      <body>
       <div class="box">
      <div class="content">
        第二十种Grid + place-items，此属性是align-items与justify-items的缩写，简单的说就是水平与垂直的对齐方式</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #adb;
      margin: auto;
      display: grid;
      height: 150px;
      margin: 0 auto;
      place-items: center;
    }
    .content{
      width: 400px;
      background: #adb;
      align-self: center;
    }

第二十一种效果图：

![70 14][]

第二十一种代码如下：

<html>
      <head>
        <title>第二十一种</title>
      </head>
      <body>
       <div class="box">
      <div class="content">
        第二十一种Grid + place-content，此属性是align-content与justify-content的缩写，简单的说就是水平与垂直的对齐方式</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #adb;
      margin: auto;
      display: grid;
      height: 150px;
      margin: 0 auto;
      place-content: center;
    }
    .content{
      width: 400px;
      background: #adb;
      align-self: center;
    }

第二十二种效果图如下：

![70 15][]

第二十二种代码如下：

<html>
      <head>
        <title>第二十二种</title>
      </head>
      <body>
       <div class="box">
      <div class="content">
        第二十二种Grid + margin</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #adb;
      margin: auto;
      display: grid;
    }
    .content{
      width: 400px;
      background: #adb;
      margin:auto;
    }

第二十三种效果图如下：

![70 16][]

第二十三种代码如下：

<html>
      <head>
        <title>第二十三种</title>
      </head>
      <body>
       <div class="box">
      <div class="content">
        第二十三种Display：table-cell</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #adb;
     margin: auto;
        text-align: center;
        display: table-cell;
      vertical-align: middle;
    }
    .content{
      width: 400px;
      background: #adb;
      margin:auto;
    }

第二十四种效果图如下：

![70 17][]

第二十四种代码如下：

<html>
      <head>
        <title>第二十四种</title>
      </head>
      <body>
       <div class="box">
      <div class="content">
        第二十四种calc</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #da0;
      margin: auto;
    }
    .content{
      width: 400px;
      background: #bcd;
      position: relative;
      top:calc((100% - 70px) / 2);
      margin:auto;
      height: 70px;
    }

第二十五种效果图如下：

![70 18][]

第二十五种代码如下：

<html>
      <head>
        <title>第二十五种</title>
      </head>
      <body>
       <div class="box">
      <div class="content">
        第二十五种Relative + translateY</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #da0;
      margin: auto;
    }
    .content{
      width: 400px;
      background: #bcd;
       position: relative;
      top: 50%;
      transform: translateY(-50%);
      margin: auto;
    }

第二十六种效果图如下：

![70 19][]

第二十六种代码如下：

<html>
      <head>
        <title>第二十六种</title>
      </head>
      <body>
       <div class="box">
      <div class="content">
        第二十六种Relative + translateY</div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      border: 1px solid #da0;
      margin: auto;
      height: auto;
      padding: 50px 0;
    }
    .content{
      width: 400px;
      background: #bcd;
      margin: auto;
    }

第二十七种效果图如下：

![70 20][]

第二十七代码如下：

<html>
      <head>
        <title>第二十七种</title>
      </head>
      <body>
       <div class="box">
      <div class="content">
        <div class='txt'></div>
        第二十七种Write-mode
         </div>
    </div>
      </body>
    </html>

.box{
      width: 500px;
      height: 250px;
      border: 1px solid #5d0;
      margin: auto;
      writing-mode: tb-lr; /* for ie11 */
      writing-mode: vertical-lr;
      text-align: center;
      margin:0 auto;
    }
    .content{
      width: 400px;
      background: #5d0;
      display: inline-block; /* for ie & edge */
      width: 100%;
      writing-mode: lr-tb;
      margin: auto; 
      text-align: left;
    }
    .box .txt{
      width: 80%;
      margin: auto;
    }

参考链接：[https://mp.weixin.qq.com/s/CvLXXDV\_0J-rF-85AWjgsw][https_mp.weixin.qq.com_s_CvLXXDV_0J-rF-85AWjgsw]

[Center]: /images/20220717/c45e3922856642c0a28579d37ebfc436.png
[Center 1]: /images/20220717/e1ae7dc4e8a44faa9944c671c5b050a6.png
[Center 2]: /images/20220717/56b281fb77f14e60b1ed01be7434d4e1.png
[Center 3]: /images/20220717/a50ef641a8d543e5b042994392eff7a5.png
[Center 4]: /images/20220717/da393e50ff454fc5a6c654b800d2d93a.png
[Center 5]: /images/20220717/52384175daf549aea498e65e333a2e95.png
[70]: /images/20220717/bc79561892164d08b449c1a7140565a7.png
[70 1]: /images/20220717/1bbbfb4414ed4ce89702e12166753363.png
[70 2]: /images/20220717/e3897b82cc4f4a859d15a30a2039e80d.png
[70 3]: /images/20220717/4a63305d422f4321b3be51757a7ab7a4.png
[70 4]: /images/20220717/9046f01c6f21409798572853bc4d8f3c.png
[70 5]: /images/20220717/8c633bd674f94d298f6cba3bb88f4b93.png
[70 6]: /images/20220717/faf3470c5cfa48e588f2324d91f335d2.png
[70 7]: /images/20220717/43abb185a6924f6c8babed3c6c399815.png
[70 8]: /images/20220717/cafbc0b3336841fb8930b6ec352a3b00.png
[70 9]: /images/20220717/296f81e9cbd5499b8fe7df31287e0ffa.png
[70 10]: /images/20220717/78fd95ece5f04749844f98a8967bf3ec.png
[70 11]: /images/20220717/21b79a94627e4b7e9366ceb4c1ef0418.png
[70 12]: /images/20220717/a29c328b0edd44eea05e2e0ec66e6599.png
[70 13]: /images/20220717/f924bbc50c394bb79f4c8116b42cf22f.png
[70 14]: /images/20220717/c2b61eb8062943a1a6b5ad5eb043bd3e.png
[70 15]: /images/20220717/da649271b15e42cd8be0d6472360412e.png
[70 16]: /images/20220717/9a495d0a627f49d5b6a693a6e650a958.png
[70 17]: /images/20220717/1ff3b2826d104055babd71091788786b.png
[70 18]: /images/20220717/0af7c9804a1c4d4487ea1b5178511310.png
[70 19]: /images/20220717/864b7943d03441238557dbc8041b0304.png
[70 20]: /images/20220717/468fe35f22174e70a5abad460c157c9d.png
[https_mp.weixin.qq.com_s_CvLXXDV_0J-rF-85AWjgsw]: https://mp.weixin.qq.com/s/CvLXXDV_0J-rF-85AWjgsw