CSS基礎 之 垂直居中

來自專欄 Miyas 技術學習小記1 人贊了文章

在做項目的時候，積累方方老師寫的CSS幾種垂直居中的方式（麻煩的不寫??，搞不懂）

一、table自帶垂直居中屬性

代碼如下：

<table class="parent"> <tr> <td class="child"> 一串文字一串文字一串文字一串文字一串文字一串文字一串文字 </tr> </table>

前提：

父元素：position：relative

子元素：position：absolute

二、transform:translate（-50%，50%）

代碼如下：

<div class="parent"> <div class="child"> 一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字 </div> </div>.parent{ height: 600px; border: 1px solid red; position: relative;}.child{ border: 1px solid green; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

三、margin-top:-50px; margin-left:-150px;

代碼如下：

<div class="parent"> <div class="child"> 一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字 </div> </div>.parent{ height: 600px; border: 1px solid red; position: relative;}.child{ border: 1px solid green; width: 300px; position: absolute; top: 50%; left: 50%; margin-left: -150px; height: 100px; margin-top: -50px;}

四、margin:auto ;

+top: 0; bottom: 0; left: 0; right: 0;

代碼如下

<div class="parent"> <div class="child"> 一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字</div>.parent{ height: 600px; border: 1px solid red; position: relative;}.child{ border: 1px solid green; position: absolute; width: 300px; height: 200px; margin: auto; top: 0; bottom: 0; left: 0; right: 0;}

五、display: flex;

+justify-content: center;

+align-items: center;

代碼如下：

<div class="parent"> <div class="child"> 一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字 </div> </div>.parent{ height: 600px; border: 3px solid red; display: flex; justify-content: center; align-items: center;}.child{ border: 3px solid green; width: 300px;}

推薦閱讀：