5種盒子垂直居中的方式
阿新 • • 發佈：2019-02-11
1.通過flex來實現：
<head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 800px; height: 800px; border: 1px solid #000; display: flex; /*控制元素在主軸的對齊方式*/ justify-content: center; /*控制預設的一行的對齊方式*/ align-items: center; margin: 0 auto; } .box1{ text-align: center; width: 600px; height: 500px; } </style> </head> <body> <div class="box"> <div class="box1"> 慧及必傷，情深不壽。<br> <br> <br> 慧及必傷，情深不壽。<br> <br> <br> 慧及必傷，情深不壽。<br> <br> <br> 慧及必傷，情深不壽。<br> <br> <br> 慧及必傷，情深不壽。<br> <br> <br> 慧及必傷，情深不壽。<br> <br> <br> 慧及必傷，情深不壽。<br> <br> <br> </div> </div>
2.通過用table來居中：
<style> table{ width: 800px; height: 500px; border: 1px solid #000; } td{ /*控制行內塊居中*/ text-align: center; } /*div{*/ /*依然可以不用寫這個屬性，inline-block，一樣垂直居中*/ /*行內元素不會繼承父級的寬度 /*display: inline-block;*/ /*}*/ </style> </head> <body> <table> <thead></thead> <tbody> <tr> <td> <div> 玲瓏骰子安紅豆</br> 入骨相思知不知</br> </br> </br> 玲瓏骰子安紅豆</br> 入骨相思知不知</br> </br> </br> 玲瓏骰子安紅豆</br> 入骨相思知不知</br> </br> </br> 玲瓏骰子安紅豆</br> 入骨相思知不知</br> </br> </br> </div> </td> </tr> </tbody> </table> </body>
3.通過定位transform來實現：
<style> *{ margin: 0; padding: 0; } .box{ width: 800px; height: 400px; border: 1px solid #000; margin: 0 auto; position: relative; } .box1{ text-align: center; width: 400px; height: 200px; position: absolute; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%,-50%); } </style> </head> <body> <div class="box"> <div class="box1"> 陌上人如玉，公子世無雙。<br> <br> <br> 陌上人如玉，公子世無雙。<br> <br> <br> 陌上人如玉，公子世無雙。<br> 陌上人如玉，公子世無雙。<br> <br> <br> 陌上人如玉，公子世無雙。<br> 陌上人如玉，公子世無雙。<br> <br> <br> 陌上人如玉，公子世無雙。<br> <br> <br> </div> </div> </body>
4.通過行內塊和vertical-align實現（這種方式必須要新增一個空標籤）：
<style>
.box{
width: 700px;
height: 500px;
border: 1px solid #000;
text-align: center;
margin: 0 auto;
}
.box1{
vertical-align: middle;
display: inline-block;
}
.tips{
width: 1px;
height: 100%;
/*background-color: red;*/
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
入則懇懇以盡忠，出則謙謙以自悔。</br>
<br>
<br>
入則懇懇以盡忠，出則謙謙以自悔。</br>
<br>
<br>
入則懇懇以盡忠，出則謙謙以自悔。</br>
<br>
<br>
入則懇懇以盡忠，出則謙謙以自悔。</br>
<br>
<br>
入則懇懇以盡忠，出則謙謙以自悔。</br>
<br>
<br>
</div>
<span class="tips"></span>
</div>
</body>5.通過table-cell來實現：
<style>
/*這樣寫的缺點在於，大盒子如果轉成table-cell，那麼這個盒子便設定不了margin了。*/
.box{
width: 800px;
height: 500px;
border: 1px solid #000;
text-align: center;
vertical-align: middle;
display: table-cell;
}
/*這裡的 inline-block 可以不用寫，不會有任何問題*/
/*.box1{
display: inline-block;
vertical-align: middle;
}*/
</style>
</head>
<body>
<div class="box">
<div class="box1">
你喜歡的是細水長流煮紅豆</br>
我想要的是聲色犬馬走天涯</br>
</br>
</br>
你喜歡的是細水長流煮紅豆</br>
我想要的是聲色犬馬走天涯</br>
</br>
</br>
你喜歡的是細水長流煮紅豆</br>
我想要的是聲色犬馬走天涯</br>
</br>
</br>
你喜歡的是細水長流煮紅豆</br>
我想要的是聲色犬馬走天涯</br>
</br>
</br>
你喜歡的是細水長流煮紅豆</br>
我想要的是聲色犬馬走天涯</br>
</div>
</div>
</body>