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>
結語:
感謝讀者們的閱讀，若有其他問題或有更好的方法，都歡迎提出共同討論，謝謝。