1.元素水平居中
1.1行內元素水平居中
像文本text、圖像img、按鈕等行內元素要實現水平居中，只需要給父元素設置text-align:center;即可。
.center{
text-align:center;
}
<div class="center">文本水平居中</div>
1.2塊級元素水平居中
1.2.1定寬塊級元素的水平居中：
方法1：給需要居中的塊級元素設置：margin:0 auto;即可，注意塊級元素必須設置寬度，否則和父元素等寬（正因爲塊級元素會自動填充對應方位，因此設置width後，自動填充效果會被覆蓋，會有剩餘空間，auto會平均分配容器的剩餘空間，達到水平居中的效果）。
.main {
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
height: 50px;
width: 150px;
margin: 0 auto;
border: 1px solid black;
text-align: center;
}
<div class="main">
<div class="center">塊級元素水平居中</div>
</div>
方法2：position+負margin：設置元素爲absolute/relative/fixed;margin=負一半寬度
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
height: 40px;
width: 100px;
left: 50%;
margin-left: -50px;
border: 1px solid black;
text-align: center;
}
<div class="main">
<div class="center">水平居中</div>
</div>
方法3：position+margin:auto
- position:absolute/relative/fixed;
- left/right:0
- width
- margin:auto;
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
height: 40px;
width: 100px;
left: 0;
right: 0;
margin: auto;
border: 1px solid black;
text-align: center;
}
<div class="main">
<div class="center">水平居中</div>
</div>
1.2.2不定寬塊級元素水平居中：
方法1：給居中元素設置：display:table;再設置margin:0 auto;即可。
.main {
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
display: table;
margin: 0 auto;
border: 1px solid black;
text-align: center;
}
<div class="main">
<div class="center">塊級元素水平居中</div>
</div>
方法2：（多個塊狀元素）子元素設置：display:inline-block;同時設置父元素：text-align:center;
.main {
height: 200px;
width: 200px;
border: 1px solid black;
text-align: center;
}
.center1, .center2 {
display: inline-block;
border: 1px solid black;
text-align: center;
}
<div class="main">
<div class="center1">水平居中</div>
<div class="center2">水平居中</div>
</div>
方法3： 設置flex佈局：將父元素設置爲display:flex,justify-content:center;
.main {
height: 200px;
width: 200px;
border: 1px solid black;
display: flex;
justify-content: center;
}
.center1, .center2 {
height: 40px;
border: 1px solid black;
text-align: center;
}
<div class="main">
<div class="center1">水平居中</div>
<div class="center2">水平居中</div>
</div>
方法4：position+transform
- left: 50%;， 定位父級的50%，元素水平方向在父級的1/2寬度處，故不處於水平居中的位置。
- translate(-50%,-0) 作用是，往左（x軸）移動自身寬度的 50%，以使其居於水平居中位置。
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
/* 定位父級的50% */
left: 50%;
/*自身寬度的50%（在不知道元素具體寬度的時候可以使用） */
transform: translate(-50%,0);
border: 1px solid red;
}
<div class="main">
<div class="center">水平垂直居中</div>
</div>
2.元素垂直居中
2.1 單行文本垂直居中
- 設置paddingtop=paddingbottom；或
- 設置line-height=height；
2.2 多行文本垂直居中
通過設置父元素table，子元素table-cell和vertical-align
vertical-align:middle的意思是把元素放在父元素的中部(垂直方向)
.main {
height: 200px;
width: 200px;
display: table;
border: 1px solid black;
}
.center {
display: table-cell;
vertical-align: middle;
border: 1px solid red;
}
<div class="main">
<div class="center">水平居中水平居中水平居中水平居中水平居中水平居中水平居中水平居中</div>
</div>
2.3塊級元素垂直居中
方法1：設置flex佈局：將父元素設置爲display:flex;和align-items:center;
.main {
height: 200px;
width: 200px;
display: flex;
align-items: center;
border: 1px solid black;
}
.center {
height: 100px;
width: 100px;
border: 1px solid red;
}
<div class="main">
<div class="center">垂直居中</div>
</div>
方法2：position+負margin：設置元素爲absolute/relative/fixed;margin=負一半高度
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
height: 100px;
width: 100px;
top: 50%;
margin-top: -50px;
border: 1px solid black;
text-align: center;
}
<div class="main">
<div class="center">垂直居中</div>
</div>
方法3：position+margin:auto
- position:absolute/relative/fixed;
- top/bottom:0（定位元素具有拉伸也行，未設置width/height,absolute元素自動填充容器；width/height設置後，限制了absolute元素自動填滿元素，margin:auto;自動平分被變更的尺寸空間。）
- height：
- margin:auto;
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
height: 100px;
width: 100px;
top: 0;
bottom: 0;
margin: auto;
border: 1px solid red;
}
<div class="main">
<div class="center">垂直居中</div>
</div>
方法4：position+transform
- top: 50%;， 定位父級的50%，元素垂直方向在父級的1/2高度處，故不處於中心位置。
- translate(0,-50%) 作用是，往上（y軸）移動自身高度的 50%，以使其居於中心位置。
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
/* 定位父級的50% */
top: 50%;
/*自身高度的50%（在不知道元素具體高度的時候可以使用） */
transform: translate(0, -50%);
border: 1px solid red;
}
<div class="main">
<div class="center">水平垂直居中</div>
</div>
3.元素水平垂直居中
方法1：絕對定位+margin:auto（IE8+）
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
height: 100px;
width: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 1px solid red;
}
<div class="main">
<div class="center">水平垂直居中</div>
</div>
方法2：絕對定位+負margin
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
border: 1px solid red;
}
<div class="main">
<div class="center">水平垂直居中</div>
</div>
方法3：flex佈局
.main {
height: 200px;
width: 200px;
display: flex;
justify-content: center;//子元素水平居中
align-items: center;//子元素垂直居中
border: 1px solid black;
}
.center {
height: 100px;
width: 100px;
border: 1px solid red;
}
<div class="main">
<div class="center">水平垂直居中</div>
</div>
方法4：position+transform
translate()函數是css3的新特性.在不知道自身寬高的情況下，可以利用它來進行水平垂直居中.。
- top: 50%;left: 50%;， 是以左上角爲原點，故不處於垂直居中的位置。
- translate(-50%,-50%) 作用是，往左（x軸）,上（y軸）移動自身長寬的 50%，以使其居於垂直居中的位置。
.main {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
.center {
position: absolute;
/* 定位父級的50% */
top: 50%;
left: 50%;
/*自身寬度和高度的50%（在不知道元素具體寬度和高度的時候可以使用） */
transform: translate(-50%, -50%);
border: 1px solid red;
}
<div class="main">
<div class="center">水平垂直居中</div>
</div>
