整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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#
ss中元素的定位
復雜的網頁布局都是通過各種網頁元素靈活定位實現的，網頁中的各種元素定位都有自己的特點。今天為大家聊一下css中常用的三種定位方法。這里說的定位不是table排版的，而是通過DIV+CSS的方法對頁面中的塊元素的定位。
float定位
float定位是css排版非常重要的手段，新手一定要多多練習熟練掌握。float定位屬性值有三種left、right和默認值none。設置了元素向左（left）或者向右（right）浮動時，元素會向父元素的坐車或者右側靠近。可以靈活運用浮動實現復雜的排版效果比如說“文字環繞”和“八仙過海”。另外可以使用clear:both屬性消除上面對下面的排版影響。下圖是一段簡單的CSS+DIV代碼，A是B、C和D的父元素，B元素使用了左float定位，C元素使用了有float定位，D元素使用了clear:both清除浮動影響。
position定位
position定位于float一樣，也是css排版中經常用到的，從字面上理解就是指定塊元素的位置，它是相對于父元素的位置和相對其他自身應該在的位置。position有static、absolute、inherit、relative和fixed五個值。static是默認值，它表示元素保持在原來的位置上，沒有任何移動效果。absolute：它表示元素生成絕對定位，可以設置top、right、bottom、left四個值來調整元素的位置。relative：它表示生成相對定位的元素，相對于其正常位置進行定位。fixed：它表示生成絕對定位的元素，相對于瀏覽器窗口進行定位，也可以設置top、right、bottom、left四個值來調整元素的位置。inherit：規定從父元素繼承 position 屬性的值。需要注意的是IE瀏覽器不支持position定位的inherit屬性。下圖是一段簡單的absolute定位代碼。
z-index空間位置
z-index屬性用于調整定位是重疊快的上下位置，你可以想象為x-y軸，垂直于頁面為z軸，z-index值越大他的位置就越往上。z-index值為整數，可以是負數，元素設置了position出現重疊時，為了保證排班效果，需要設置它們的z-index屬性值。默認的z-index屬性值是0，兩個元素z-index都一樣將保持原來的空間位置不變。
關于css中的元素定位到這，如果你是大神可以忽略這篇文章，每天學習一個知識點，每日寄語-“成功源于不懈的努力。”
文翻譯自 How to Center a Div Using CSS Grid，作者：Fimber Elemuwa, Ralph Mason。 略有刪改
在本文中，我們將介紹使用CSS Grid在水平和垂直方向上居中div的五種方法，當然這些技術可用于任何類型的元素。
我們首先創建一個容器，其中包含一個簡單的div元素，我們將使用它來演示這些居中方法。下面是HTML：
<article>
<div></div>
</article>
下面是我們的初始CSS：
article {
width: 100%;
min-height: 100vh;
background: black;
display: grid;
}
div {
width: 200px;
background: yellow;
height: 100px;
}
在下面所有的例子中，我們將使用display: grid屬性。這將<article>元素建立為網格容器，并為該容器生成塊級網格。我們已經將網格容器設置為寬（width: 100%）和高（min-height: 100vw），這樣我們的div就有足夠的空間在其中移動。
接下來讓我們來看看將div居中的各種方法。
place-self屬性提供了一種簡單的方法來水平和垂直居中網格項。它用于將網格項置于其網格單元格的中心。
將div居中就像這樣簡單：
article {
display: grid;
}
div {
place-self: center;
}
place-self屬性是justify-self（水平）和align-self（垂直）屬性的簡寫。
使用place-self對于在網格內居中單個項目特別有用，因為它使其他網格項目可以自由地以不同的方式定位。但這并不是使用Grid使元素居中的唯一方法，繼續看看其他的一些方法。
place-items屬性是justify-items（水平）和align-items（垂直）的簡寫。這些屬性應用于網格容器而不是每個網格項，當我們希望所有網格項具有相同的位置時，這些屬性非常有用。
將以下CSS代碼添加到父容器：
article {
display: grid;
place-items: center;
}
我們可以基于初始代碼添加更多的div元素，看看會發生什么。結果是每個div將在其網格單元格內水平和垂直居中，如下圖所示（通過瀏覽器的網格檢查器）。
place-content屬性是justify-content（水平）和align-content（垂直）的簡寫。雖然place-self和place-items控制網格項如何放置在其指定的網格單元格中，但place-content指定網格容器的整個內容應如何對齊（即，所有網格項被視為一個組）。在我們的演示中，只有一個網格項（我們的單個黃色div），因此我們也可以使用place-content將其置于其容器的中心。
將以下CSS代碼添加到父容器：
article {
display: grid;
place-content: center;
}
這里有幾點需要注意。到目前為止，在所有的例子中我們都使用了center的值。但是到目前為止，我們已經探索的每個屬性都有各種其他的放置物品的值。place-content有很多值，另外兩個值也可以用于居中我們的div：space-around和space-evenly。
此外，在我們的簡單例子中，一個div在容器中居中，我們甚至可以混合和匹配我們上面看到的屬性。我們可以使用justify-content和align-items來居中div，有興趣的可以嘗試看看。
像往常一樣，我們將使用display: grid來定位父容器。我們還將使用margin: auto為div指定自動邊距。這使瀏覽器自動計算div周圍的可用空間，并在其網格單元格內垂直和水平劃分，將div放置在中間：
article {
display: grid;
}
div {
margin: auto;
}
最后一個方法我們將深入探討Grid布局的強大功能，因為我們將研究兩種方法來將div居中放置在具有多行和多列的網格中。
以下是我們的基本CSS：
article {
display: grid;
grid-template-columns: 1fr 200px 1fr;
grid-template-rows: 1fr 100px 1fr;
}
div {
background: yellow;
grid-column: 2;
grid-row: 2;
}
我們顯式地布局了一個網格，中間有一個區域來放置我們的div。我們現在甚至不需要在div上設置尺寸，因為網格軌跡會處理這個問題。我們在網格的中間指定一個網格單元格，其寬度為200px，高度為100px，然后我們告訴div從第二條網格線和第二條行線開始。(默認情況下，它將僅跨到每個方向上的下一條軸網線。）div元素被很好地放置在其容器的中心，如下所示。
下圖顯示了位于其網格軌跡內的div。
網格布局提供了各種不同的方法來實現這一結果。最后我們做與上面相同的事情，但這次為我們的div使用一個命名區域：
article {
display: grid;
grid-template-columns: 1fr 200px 1fr;
grid-template-rows: 1fr 100px 1fr;
grid-template-areas: ". . ."
". box ."
". . .";
}
div {
background: yellow;
grid-area: box;
}
在這里，我們設置一個名為grid-area的box，然后描述它應該位于網格上的什么位置，用一個簡單的點（.）指定哪些網格單元格是空的。
這種布局方法的優點是，它可以很容易地將許多其他元素放置在我們想要的任何地方，這就是網格布局的強大之處。
這些方法中的每一個都允許我們在容器中水平和垂直地居中一個div。place-self和margin: auto選項很好，因為它們直接應用于居中的元素，而不是其容器。但是本文中介紹的所有方法都是高效的，并且可以很好地完成這項工作。在各種場景中，我們可能希望將元素置于中心，因此擁有一系列工具來實現該目標非常重要。
在演示示例中，我們只是使用了一個空的div，但是當然我們可以向div添加內容，居中仍然有效。而且這些居中技術同樣適用于div以外的元素。
有興趣的可以看看原文，可以在線體驗不同顏色格式是如何工作的。看完本文如果覺得有用，記得點個贊支持，收藏起來說不定哪天就用上啦～
專注前端開發，分享前端相關技術干貨，公眾號：南城大前端（ID: nanchengfe）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
