|
|
|
|
|
|
[示例]如何將flexbox垂直和水平對齊到中心
作者:admin 時間:2022-9-9 15:41:40 瀏覽:我們已經知道，flexbox 是一個模型，而不僅僅是一個 CSS 屬性。
下圖顯示了一個有兩個軸的框，一個是主軸（即水平軸）和交叉軸（即垂直軸）。為了使flexbox在中心水平和垂直對齊 ，我們將需要在這兩個軸上工作。
所以，首先，我們需要在這里記住兩個 CSS 屬性，它們是：
- justify-content
- align-items
第一個屬性，即 justify-content，是在主軸上對齊任何 HTML 元素，主軸是水平軸。第二個屬性是在橫軸上對齊任何 HTML 元素，也就是縱軸。
因此，要在屏幕中心水平和垂直對齊 HTML 元素，我們必須將這兩個屬性的值都設置為 'center'。
句法：
.gfg-box {
display: flex;
justify-content: center;
align-items: center;
}例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.gfg-box {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.box {
padding: 8px 35px;
font-size: 30px;
color: green;
border: 10px solid green;
}
</style>
</head>
<body>
<div class="gfg-box">
<div class="box">
<h1>WebKaka.com</h1>
</div>
</div>
</body>
</html>
輸出
x
