1，水平居中
水平居中可分爲行內元素水平居中和塊級元素水平居中
1.行內元素水平居中
常用的行內元素爲a/img/input/span等，標籤內的HTML文本也屬於此類。對此類情況，水平居中是通過給父元素設置text-align:center來實現的。
HTML結構：
<body>
<div class="text">
Hello World!!!
</div>
</body>
CSS樣式：
<style>
.text{
text-align:center;
}
</style>
2，塊級元素
常用的塊級元素爲div/table/ul/dl/form/h1/p等。根據應用場景不同又分爲定寬級與不定寬級，兩種情況，分別討論。
定寬元素
-
只要滿足“寬度固定”和“塊狀”兩個條件元素就可以通過設置“margin:0 auto”來實現居中。
HTML結構：
<body> <div> Hello World! </div> </body>CSS樣式：
<style> div{ border:1px solid red; width:500px/*定寬*/ margin:0 auto; } </style>
不定寬塊級元素
我們經常會遇到不定寬塊級元素的使用，如分頁導航，因爲分頁的數目不定，所以不能用寬度限制。此時對元素進行水平居中主要有三種方式；
-
加入table標籤
-
通過給要居中顯示的元素，設置display:table，然後設置margin: 0 auto來實現
<body> <div class="text">水平居中</div> </body> .text{ display:table; margin：0 auto; border:1px solid red }
-
-
設置display:inline-block方法
-
子元素設置inline-block，同時父元素設置text-align:center
<div class="center"> <div class="text">1</div> <div class="text">2</div> </div> .center{ text-align:center } .text{ display:inline-block; }
-
-
設置flex佈局
-
只需要把處理的塊狀元素的父元素設置display:flex；justify-content:center;
<div class="center"> <div class="text">1</div> <div class="text">2</div> </div> .center{ display:flex; justify-content:center; }
-
-
position+負margin；
-
position+margin：auto；
-
position+transform；
Tips：這三種方法與垂直居中的道理是一樣的，只不過需要把top/bottom改爲left/right。
2，垂直居中
-
單行文本垂直居中
- 設置padding-top=padding-bottom；
- 設置line-height=height；
-
多行文本垂直居中
-
通過設置父元素table，子元素table-cell和vertical-align，vertical-align:middle的意思是把元素放在父元素的中部。
.center{ width:200px; height:300px; display:table; border:2px solid; } .text{ display:table-cell; vertical-align:middle; border:1px solid; } <div class="center"> <div class="text">多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中</div> </div>
-
-
塊級元素垂直居中
-
flex佈局
在需要垂直居中的父元素上，設置display:flex和align-items:center;
要求：父級元素必須顯式設置height值
.center{ width:200px; height:300px; display:flex; align-items:center; border:1px solid; } <div class="center"> <div>垂直居中</div> </div>
-
-
利用position和top和負margin
-
設置元素爲absolute/relative/fixed
-
margin=負一半
.center{ position:relative; height:200px; width:200px; border:1px solid; } .text{ position:absolute; height:100px; width:150px; top:50%; margin-top:-50px; line-height:100px; background-color:red; } <div class="center"> <div class="text">已知高度垂直居中</div> </div>
-
-
利用position和top/bottom和margin：auto
-
position:absolute/relative/fiexd
-
top/bottom:0
-
margin:auto
.center{ position:relative; height:200px; width:200px; border:1px solid; } .text{ position:absolute; height:100px; width:150px; } <div class="center"> <div class="text">已知高度垂直居中</div> </div>
-
-
利用position和top和transform
-
transform中translate偏移的百分比就是相對於元素自身的尺寸而言。
.center{ position:relative; height:200px; width:200px; border:1px solid blue; } /*不用知道被居中元素的height*/ .text{ position:absolute; top:50%; transform:translate(0,-50%); line-height:100px; background-color:red; } <div class="center"> <div class="text">已知高度垂直居中</div> </div>tips：
- 上面的方法，稍加改動，就會成爲塊級水平居中方法，如top/bottom換成left/right
- transform，可以用於未知元素大小的居中
-
3，水平垂直居中
-
絕對定位+margin：auto
div{ width:200px; height:200px; background:red; position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; } -
絕對定位+負margin
div{ width:200px; height:200px; background:green; position:absolute left:50%; top:50%; margin-left:-100px; margin-top:-100px; } -
絕對定位+transform
div{ width:200px; height:200px; background:green; position:absolute; left:50%;/*定位父級的50%*/ top:50%; transform:translate(-50%,-50%); } -
flex佈局
.center{ height:600px; display:flex; justify-content:center;//子元素水平居中 align-items:center;//子元素垂直居中 } .center>div{ background:red; width:100px; height:100px; } -
table-cell實現居中
-
設置
display:table-cell
text-align:center;
vertical-align:middle;
-