整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS 是前端里面的基礎之一，也是非常重要的一部分，它往往決定了你所做出來的網頁頁面是否美觀。在設計網頁頁面的過程中，總會有將元素或者文字進行水平垂直居中的要求。下面w3cschool編程獅就為大家介紹 CSS 中幾種常用到的水平垂直居中的方法。
當元素有給定的高度以及寬度的時候，使用 margin: auto; 元素僅會水平居中，并不會進行垂直居中。此時就需要設置元素的 position 為 absolute，父級元素的 position 為 relative，同時元素的上下左右都需要設置為 0。
HTML 代碼
<div class="box">
<div class="center1"></div>
</div>CSS 代碼
.box{
width: 200px;
height: 200px;
background-color: #eee;
position: relative;
margin-top: 20px;
}
.center1{
width: 50px;
height: 50px;
background-color: #00ACED;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}效果展示：
當已經知道了要進行水平垂直居中的元素的寬高時，就可以通過設置 position: absolute 來實現。但是，使用的同時還需要結合其他屬性才完整實現。因為，單是設置 absolute，上左距離均為一半，就會出現下面這種情況。很顯然可以看到，元素并不是完全居中，僅只有左上角的位置在中心點
概念圖：
因此想要實現元素完全水平垂直居中，在設置了 absolute 定位后，可以設置 margin 值為負，或者使用 calc 來計算，上左距離在 50% 的基礎上還要減去元素本身一半的寬高。
margin 值為負或者 calc 計算均是在已知元素寬高的情況下，假設不知道元素的寬高，那么怎么實現水平垂直居中呢？這里就可以使用 transform 屬性，通過坐標位移來實現居中。
CSS 代碼
/* 結合 margin */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
/* 結合 calc 計算*/
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: calc(50% - 25px)
top: calc(50% - 25px);
}
/* 結合 transform */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}效果展示
03
PART
可以通過彈性布局來設置水平垂直居中，這里需要設置父級元素 display:flex; 還需要設置兩個屬性，水平布局 justify-content 以及垂直布局 align-items。
HTML代碼
<div class="box2">
<div class="center4"></div>
</div>CSS代碼：
.box2{
background-color: #eee;
width: 200px;
height: 200px;
position: relative;
margin-top: 20px ;
display: flex;
justify-content: center;
align-items: center;
}
.center4{
width: 50px;
height: 50px;
background-color: #B39873;
}效果展示：
前面介紹的是元素如何實現水平垂直居中，下面介紹的是如何將文字進行水平垂直居中。這第一個方法也是最經常用的，使用文本水平對齊 text-align 和行高 line-height 來實現的。
HTML 代碼
<div class="box3">
<div class="center5">文字居中</div>
</div>CSS 代碼
.box3{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
}
.center5{
text-align: center;
line-height: 200px;
}效果展示
05
PART
第二個方法可以通過網格布局 grid 來實現。而這里通過 grid 有兩種方式實現，一種對元素本身屬性進行設置，另一種在元素的父級元素中設置。兩者看上去內容似乎差不多，不同的是在元素中設置的是 align-self 還要多了一個 margin，父級元素中是 align-items。
相關代碼：
/* grid 元素中設置 */
.box4{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
display: grid;
}
.center6{
align-self: center;
justify-content: center;
margin: auto;
}
/* grid 父級元素中設置 */
.box5{
background-color: #eee;
width: 200px;
height: 200px;
margin-top: 20px;
display: grid;
align-items: center;
justify-content: center;
}
效果展示：
以上就是關于 CSS 如何將元素或者文字進行水平垂直居中的幾種常用方法，大家還其他關于 CSS 實現水平垂直居中的方法嗎？請在評論區留下你的想法。
關注w3cschool編程獅訂閱更多IT資訊、技術干貨~
中，是我們編碼過程中最常見的，那么，我們平時常見的居中方式，下面一一羅列出來，有錯誤的地方，望碼友多多包涵并加以矯正。
水平居中
1、多塊級元素，設置display:inline-block;使之在一行排列,在父級樣式里，設置text-align：center;就可以實現水平居中的效果
body {
text-align: center;
}
div{
width: 100px;
height: 100px;
border: 1px solid;
display: inline-block;
}
2、內聯元素，利用text-align：center;可以實現塊級元素內部的內聯元素的水平居中
div {
border: 1px solid red;
width: 100px;
height: 100px;
text-align: center;
}
<div>
<span>塊級元素中的行內元素的水平居中</span>
</div>
3、塊級元素，通過把固定寬高的塊級元素的margin-left和margin-right設置為auto，方可實現
div{
width: 100px;
height: 100px;
border: 1px solid;
margin： 0 auto;
}
<div></div>
4、利用彈性盒子（display: flex;）
給父級定寬定高，然后設置display: flex;以及justify-content: center;方可達到水平居中效果
body {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
border: 1px solid red;
}
div {
width: 100px;
height: 100px;
border: 1px solid;
}
<body>
<div></div>
</body>
垂直居中
1、內聯元素（單行）
通過設置元素的height和line-height,方可達到居中效果
2、多行元素，利用表布局（table）
通過給想要居中的元素的父級設置display: talbe-cell;以及vertical-align：enter;方可居中
3、彈性盒子（flex）
給父級設置display: flex;變成彈性盒子。
分兩種，
（1），主軸方向為水平，直接設置 align-items: center;
（2），主軸方向為垂直，設置flex-direction: column;改變主軸方向，然后設置justify-content: center;
彈性盒模型主軸不同，居中的方式也不同，靈活應用。
4、固定寬高的塊級元素
利用父相子絕的定位原理，實現垂直居中
position: absolute;
left: 50%;
top: 50%;
margin-left: (自身高度的一半);
5,未知寬高的塊級元素
利用transform: translateY(-50%);方可實現
position: absolute;
top: 50%;
transform: translateY(-50%);
水平垂直方向的居中
1、固定寬高
通過margin平移整體寬高的一半，實現水平垂直居中
{
position: absolute;
width: 100px;
height: 100px;
border: 1px solid;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
2、未知寬高
利用transform中的translate()屬性實現
{
position: absolute;
border: 1px solid;
left: 50%;
top: 50%;
transform: translateY(-50%);
transform: translateX(-50%);
}
3、彈性盒子（flex）
通過display：flex，把父級變成彈性盒模型，利用align-items: center;justify-content: center;方可實現居中。
注意：彈性盒子容器中，多行項目的居中方式另加計算。
body {
border: 1px solid;
width: 300px;
height: 300px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
div {
border: 1px solid;
width: 100px;
height: 100px;
}
隨著學習的不斷深入，居中方式可以有很多種，我們要善于利用，更加明確什么情況下用怎樣的居中方式。
今天的內容中，廊坊網站建設公司的技術人員將分享下網站導航水平居中設置的方法，其實辦法有很多，以CSS代碼為例，這種代碼操作很方便，后期修改的時候也簡單，以下是詳細的實例操作。
方法一：使用display:inline-block控制
這個方法比較簡單，是將容器轉成display:inline-block行內塊級元素，然后就可以直接用text-align:center使其達到水平居中效果。HTML代碼中需要一個div來包圍這個導航菜單。
方法二：使用position:relative解決
position:relative定位方法來讓元素水平居中，一般來說小編推薦這方法，因為代碼多了個div去包住，當然這些是根據情況來使用的。將定位div設為浮動，再定位left:50%,然后導航定位至left:-50%。
方法三：使用display:table解決
HTML代碼實例
<ul class="navbar">
<li><a href="/">Home</a></li>
</ul>
CSS代碼實例
.navbar {
display:table;
margin:0 auto;
}
.navbar li {
display:table-cell;
}
.navbar li + li {
padding-left:20px;
}
方法四：使用display:inline-flex解決
HTML代碼實例操作
<div class="navbar">
<ul>
<li><a href="/">Home</a></li>
</ul>
</div>
CSS代碼代碼編寫
.navbar {
text-align:center;
}
.navbar > ul {
display:-webkit-inline-box;
display:-moz-inline-box;
display:-ms-inline-flexbox;
display:-webkit-inline-flex;
display:inline-flex;
}
.navbar li + li {
margin-left:20px;
}
提示：瀏覽器兼容問題，目前這個代碼不支持IE7及以下版本的IE瀏覽器。
其實這些方法很好的解決了網站導航菜單居中的問題，使用CSS編寫有助于后期的修改，極大的方便了我們的操作和節省了寶貴的時間。在以后的內容中，小編還將會繼續為朋友們分享更多更有價值的知識。
原創文章出自暢想網絡，轉載地址：http://www.e-wkj.cn/xw/2316.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
