CSS水平垂直置中的方法
前言:
平常在寫網頁時,總是會遇到水平垂直置中的問題,所以特此紀錄一下使用方式,若有讀者們遇到類似的問題,也可以嘗試看看這個解決方法。
內容:
在使用flex的方式來置中時,切記要給予寬度(width)和高度(height)的值,否則就沒辦法判定中間點的位置了。
使用方式:
.flex-center { display: flex; align-items: center; /*垂直置中*/ justify-content: center;/*水平置中*/ height: 15vw; width: 15vw; }
範例:水平垂直置中範例展示
<style> body { height: 100vw; width: 100vw; } h1 { font-size: 5vw; text-align: center; } font { font-size: 3vw; } .div-size { width: 50vw; height: 20vw; float: left; } .large-square { height: 10vw; width: 10vw; background-color: #0094ff; } .small-square { height: 5vw; width: 5vw; background-color: #00ff90; } /* 水平置中*/ .horizontal-center { display: flex; justify-content: center; } /*垂直置中*/ .vertical-center { display: flex; align-items: center; } /*水平垂直置中*/ .horizontal-vertical-center { display: flex; align-items: center; justify-content: center; } </style> <html> <head> <title>水平垂直置中範例展示</title> </head> <body> <h1>水平垂直置中範例展示</h1> <div class="div-size"> <div class="horizontal-center"> <div class="large-square"> <div class="small-square"></div> </div> </div> <div class="horizontal-center"><font>原始的位置</font></div> </div> <div class="div-size"> <div class="horizontal-center"> <div class="horizontal-center large-square"> <div class="small-square"></div> </div> </div> <div class="horizontal-center"><font>水平置中的位置</font></div> </div> <div class="div-size"> <div class="horizontal-center"> <div class="vertical-center large-square"> <div class="small-square"></div> </div> </div> <div class="horizontal-center"><font>垂直置中的位置</font></div> </div> <div class="div-size"> <div class="horizontal-center"> <div class="horizontal-vertical-center large-square"> <div class="small-square"></div> </div> </div> <div class="horizontal-center"><font>水平垂直置中的位置</font></div> </div> </body> </html>
結語:
感謝讀者們的閱讀,若有其他問題或有更好的方法,都歡迎提出共同討論,謝謝。