整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
平居中設置
我們在實際工作中常會遇到需要設置水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。
這里我們又得分兩種情況：行內元素 還是 塊狀元素 ，塊狀元素里面又分為定寬塊狀元素，以及不定寬塊狀元素。今天我們先來了解一下
如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center 來實現的。
當被設置元素為 塊狀元素 時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。
如果是定寬塊狀元素。(定寬塊狀元素：塊狀元素的寬度width為固定值。)
滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的。
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
第一種做法：
為什么選擇方法一加入table標簽? 是利用table標簽的長度自適應性---即不定義其長度也不默認父元素body的長度（table其長度根據其內文本長度決定），因此可以看做一個定寬度塊元素，然后再利用定寬度塊狀居中的margin的方法，使其水平居中。
第一步：為需要設置的居中的元素外面加入一個 table 標簽 ( 包括 <tbody>、<tr>、<td> )。
第二步：為這個 table 設置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）。
舉例如下：
html代碼：
<div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div>
css代碼：
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
第二種做法：
改變塊級元素的 display 為 inline 類型（設置為 行內元素 顯示），然后使用 text-align:center 來實現居中效果。如下例子：
html代碼：
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代碼：
<style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本與div邊框之間的間隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（設置li文本之間的間隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>
這種方法相比第一種方法的優勢是不用增加無語義標簽，但也存在著一些問題：它將塊狀元素的 display 類型改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值。
方法三：
通過給父元素設置 float，然后給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。
我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。
代碼如下：
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代碼：
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。
文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，集齊各種常用的居中方法，以備平時工作使用查閱，也歡迎大家更新或者提供建議
1.行內元素水平居中
利用 text-align: center 可以實現在塊級元素內部的行內元素水平居中。此方法對inline、inline-block、inline-table和inline-flex元素水平居中都有效。
.parent{
text-align:center;//在父容器設置
}
此外，如果塊級元素內部包著也是一個塊級元素，我們可以先將其由塊級元素改變為行內塊元素，再通過設置行內塊元素居中以達到水平居中。如下
常常有一些初學者在使用text-align:center時會碰到不生效的問題，如下面的一個例子
p為塊狀元素，所以只需要在p的css代碼里設置display:inline或display:inline-block，將塊狀元素轉為內聯元素即可。對于塊狀元素也可以使用margin:0 auto;來控制居中。
2.塊級元素的水平居中（5種方法）
這種情形可以有多種實現方式，下面我們詳細介紹:
1）將該塊級元素左右外邊距margin-left和margin-right設置為auto
.child{
width: 100px;//確保該塊級元素定寬
margin:0 auto;
}
2）使用table+margin
先將子元素設置為塊級表格來顯示（類似），再將其設置水平居中。display:table在表現上類似table元素，實現table一樣的居中效果，但是寬度為內容寬。
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: table;
margin: 0 auto;
}
</style>
3）使用absolute+transform
先將父元素設置為相對定位，再將子元素設置為絕對定位，向右移動子元素，移動距離為父容器的一半，最后通過向左移動子元素的一半寬度以達到水平居中。
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
position:absolute;
left:50%;
transform:translateX(-50%);
}
.parent {
position:relative;
}
</style>
注：不過transform屬于css3內容，兼容性存在一定問題，高版本瀏覽器需要添加一些前綴。
4）使用flex+justify-content
通過CSS3中的布局利器flex中的justify-content屬性來達到水平居中。
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content:center;
}
</style>
也會遇到和transform一樣的問題，需要注意瀏覽器的兼容性
5）使用flex+margin
通過flex將父容器設置為為Flex布局，再設置子元素居中。
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
}
.child {
margin:0 auto;
}
</style>
單行內聯元素垂直居中
<div id="box">
<span>單行內聯元素垂直居中。</span>。
</div>
<style>
#box {
height: 120px;
background: blue;
line-height: 120px;
border: 2px dashed #f69c55;
color: white;
}
</style>
2.多行內聯元素垂直居中（2種方法）
1）利用flex布局（flex）
利用flex布局實現垂直居中，其中flex-direction: column定義主軸方向為縱向。這種方式在較老的瀏覽器存在兼容性問題。
<div class="parent">
<p>Dance like nobody is watching, code like everybody is.
Dance like nobody is watching, code like everybody is.
Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
.parent {
height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
border: 2px dashed #f69c55;
}
</style>
2)利用表布局（table）
利用表布局的vertical-align: middle可以實現子元素的垂直居中
<div class="parent">
<p class="child">The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.</p>
</div>
<style>
.parent {
display: table;
height: 140px;
border: 2px dashed #f69c55;
}
.child {
display: table-cell;
vertical-align: middle;
}
</style>
3 塊級元素垂直居中（四種方法）
1）使用absolute+負margin(已知高度寬度)
通過絕對定位元素距離頂部50%，并設置margin-top向上偏移元素高度的一半，就可以實現了。
必須要指定父元素的高度，否則出現高度塌陷的問題
2）使用absolute+transform
當垂直居中的元素的高度和寬度未知時，可以借助CSS3中的transform屬性向Y軸反向偏移50%的方法實現垂直居中。但是部分瀏覽器存在兼容性的問題。
<div class="parent">
<div class="child">未知高度的塊級元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
3）使用flex+align-items
通過設置flex布局中的屬性align-items，使子元素垂直居中。
<div class="parent">
<div class="child">未知高度的塊級元素垂直居中。</div>
</div>
.parent {
display:flex;
align-items:center;
}
4）使用table-cell+vertical-align
通過將父元素轉化為一個表格單元格顯示（類似 <td> 和 <th>），再通過設置 vertical-align屬性，使表格單元格內容垂直居中。
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: table-cell;
vertical-align: middle;
}
</style>
這種情形也是有多種實現方式。
方法1：絕對定位與負邊距實現（已知高度寬度）
注：這種方式需要知道被垂直居中元素的高和寬，才能計算出margin值，兼容所有瀏覽器。
方法2：絕對定位與margin:auto（已知高度寬度）
這種方式無需知道被垂直居中元素的高和寬，但不能兼容低版本的IE瀏覽器。
#container {
position: relative;
height:100px;//必須有個高度
}
#center {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;//注意此處的寫法
}
方法3：絕對定位+CSS3(未知元素的高寬)
利用Css3的transform，可以輕松的在未知元素的高寬的情況下實現元素的垂直居中。 CSS3的transform固然好用，但在項目的實際運用中必須考慮兼容問題，大量的hack代碼可能會導致得不償失。
#container {
position: relative;
}
#center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
方法4：flex布局
利用flex布局，其中justify-content 用于設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。不能兼容低版本的IE瀏覽器。
#container {//直接在父容器設置即可
height: 100vh;//必須有高度
display: flex;
justify-content: center;
align-items: center;
}
方法5：flex/grid與margin:auto
容器元素設為 flex 布局或是grid布局，子元素只要寫 margin: auto 即可,不能兼容低版本的IE瀏覽器。
#container {
height: 100vh;//必須有高度
display: grid;
}
#center {
margin: auto;
}
鏈接文章
https://segmentfault.com/a/1190000013966650
https://juejin.im/post/5bc3eb8bf265da0a8a6ad1ce
https://segmentfault.com/a/1190000015095402
自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取
Html5-CSS之五大居中方式
你是不是也對元素居中的知識點很是模糊？是不是苦于找不到一個總結的通俗易懂的說明？是不是自己懶得去總結？恭喜你，搜到這篇博客！ 這是鄙人在前端的學習與實踐中總結出的元素的五大居中方式，黏貼了代碼并對代碼做了解釋，希望對迷茫的有所幫助！
下面的居中示例中，統一使用了同一個div作為父元素和p作為子元素
設置一個div,并且設置了div的寬高邊框，div里面設置一個塊元素p，設置了它的寬高和背景色
css居中方式1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中1</title>
<style>
*{margin:0;}
div{width:200px;height:300px;border:2px solid #000;margin:200px auto;
text-align:center;font-size:0;
}
div p{width:100px;height:100px;background:#666;
display:inline-block;vertical-align:middle;
}
div:after{content:"";display:inline-block;height:100%;vertical-align:middle;}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
這里利用了偽元素讓子元素p在div盒子里左右水平居中只需要在它的父元素div里加text-align:center;垂直方向居中需要在父元素后面加了一個偽元素，并使得樣式為inline-block;height:100%;就是和父元素一樣高，vertical-align:middle;垂直居中，也就是p元素相對與偽元素居中，由于偽元素和div一樣高，所以相當于p元素在div里垂直居中。
css居中方式2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中2</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{position:absolute;left:0;bottom:0;right:0;top:0;margin:auto;width:100px;height:100px;background:#f99;}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
這里利用了定位居中
子元素p設置position：absolute脫離文檔流,默認以html作為父元素，所以我們給父元素div設置position:relative;使得p以div為父元素做位置的變動，left:0;tight:0;top:0;bottom:0;（只有設置了定位的元素才可以使用這種方式來移動），最后margin:auto;就會水平和垂直都居中。
css居中方式3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中3</title>
<style>
*{margin:0;}
div{display:flex;justify-content:center;align-items:center;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{width:100px;height:100px;background:#f99;}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
這里利用了彈性盒居中
父元素div設置成彈性盒樣式，justify-content:center;主軸居中
align-items:center;垂直居中（而且這兩個只能設置在父元素上，彈性盒知識）
css居中方式4
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中4</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{width:100px;height:100px;background:#f99;position:absolute;
left:50%;top:50%;margin:-50px 0 0 -50px;}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
利用定位線左上角居中，然后左移子元素寬度的一半，再上移子元素高度的一半。
css居中方式5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中5</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{position:absolute;width:100px;height:100px;background:#f99;left:50%;top:50%;
transform:translate(-50%,-50%);}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
利用動畫移動屬性transform
結語
相信看了上面的有關Html5、css的元素五大居中方式，你們就可以解決自己的小問題了，但是也要養成一個總結的好習慣。好記性不如爛筆頭！以前留下來的話語總是有他的道理。Come on！
原文鏈接：https://blog.csdn.net/qq_38110274/article/details/102756968
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
