整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者：薔薇Nina
原文：https://www.cnblogs.com/wcwnina/p/11297630.html
在CSS里，標簽位置居中一直是困擾Web前端的難題。在本文中，我對這類問題進行了探究和給出了幾點建議，供讀者參考。
在父級標簽中使用 text-align: center。
效果：
如果是單行，則為該標簽設置行高（line-height）且與其父級標簽 height 相等即可。
效果：
如果是多行，稍微有點麻煩，需要在該標簽設置 display: table-cell 和 vertical-align: middle，在其父級標簽設置 display: table。
效果：
方法一：在父級標簽中使用 flex 彈性盒子。
效果：
方法二：在該標簽中使用 margin 屬性。
效果：
在父級標簽中使用 flex 彈性盒子。
效果：
總結：對于行內標簽居中，優先考慮文本對齊（text-align）和顯示單元格（table-cell）；對于塊標簽居中，優先考慮顯示彈性盒子（flex）。
在網頁中將 HTML 元素水平居中，可以使用 CSS 中的 margin: 0 auto; 屬性。以下是一種常用的實現方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Centering</title>
<style>
.center {
width: 300px; /* 設置元素寬度 */
margin: 0 auto; /* 水平居中 */
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="center">
<p>This element is horizontally centered.</p>
</div>
</body>
</html>
在上面的示例中， center 類的元素使用了 width: 300px; 來設置寬度，然后通過 margin: 0 auto; 來實現水平居中。這樣，無論屏幕寬度如何變化，元素都會始終水平居中顯示。
您也可以將此樣式應用到任何 HTML 元素（例如 div 、 span 、 p 等），以實現水平居中效果。
iv中的內容居中顯示，包括水平和垂直2個方向。
<html>
<head>
<style type="text/css">
.box{
height:400px;
width:600px;
background-color: #f2dede;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="box">
<div style="background-color: #00a4e6">居中</div>
<div style="background-color: #00b33c">居中</div>
</div>
</body>
</html>說明：
align-items:center，控制垂直方向
justify-content:center，控制水平方向
彈性布局介紹：
Flex 彈性盒子布局是很強大的布局，它可以很方便的控制元素在垂直和水平方向上的行為。
使用display:flex
容器存在兩個軸，水平叫主軸（Main-Axis），垂直叫交叉軸（Cross-Axis）。主軸左邊是開始位置（main start）右邊是結束位置（main end），交叉軸上是開始位置（cross start）下是結束位置（cross end）。用 justify 屬性控制主軸項目的空隙，使用 align 屬性控制交叉軸項目之間的垂直行為。
容器一共有 6 個屬性：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
#記錄我的2024#
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
