|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
[示例]如何將flexbox垂直和水平對齊到中心
作者:admin 時(shí)間:2022-9-9 15:41:40 瀏覽:我們已經(jīng)知道，flexbox 是一個(gè)模型，而不僅僅是一個(gè) CSS 屬性。
下圖顯示了一個(gè)有兩個(gè)軸的框，一個(gè)是主軸（即水平軸）和交叉軸（即垂直軸）。為了使flexbox在中心水平和垂直對齊 ，我們將需要在這兩個(gè)軸上工作。
所以，首先，我們需要在這里記住兩個(gè) CSS 屬性，它們是：
- justify-content
- align-items
第一個(gè)屬性，即 justify-content，是在主軸上對齊任何 HTML 元素，主軸是水平軸。第二個(gè)屬性是在橫軸上對齊任何 HTML 元素，也就是縱軸。
因此，要在屏幕中心水平和垂直對齊 HTML 元素，我們必須將這兩個(gè)屬性的值都設(shè)置為 '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>
輸出
相關(guān)文章
x
- 站長推薦
