Demo
html
<div class="father">
<ul class="center">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
css
.father {
background-color: green;
}
.center {
background-color: orange;
}
效果：
image.png
實現(xiàn)
1.寬度已知蓬抄，使用margin
.center {
background-color: orange;
width: 100px;
margin: 0 auto;
}
效果：
image.png
適用：
只能進行水平居中割捅，對浮動元素或絕對定位元素無效
2.寬度已知,使用絕對定位
.father {
background-color: green;
text-align: center;
position: relative;
}
.center {
background-color: orange;
position: absolute;
width: 200px;
left: 50%;
margin-left: -100px;
}
效果
image.png
原理:
把這個絕對定位的元素的left或top設置為50%，這時候并不是居中的璧榄，而是把這個元素向右移動父元素一半的距離，再使用一個負的margin-left或者margin-top的值把它拉回到居中位置吧雹，這個值取該元素寬度或高度的一半骨杂。
優(yōu)點：
兼容IE6-7
缺點：
不能使用百分比大小，內容高度不可變雄卷；內容可能會超過容器搓蚪；
3.寬度已知，使用絕對定位來實現(xiàn)完全居中
.father {
background-color: green;
position: relative;
width: 300px;
height: 300px;
}
.center {
background-color: orange;
position: absolute;
width: 200px;
height: 200px;
margin: auto;
/*這句必不可少*/
left: 0;
/*left與right必須成對出現(xiàn)來控制水平方向*/
right: 0;
bottom: 0;
/*top與bottom必須成對出現(xiàn)來控制水平方向*/
top: 0;
}
效果
image.png
4.寬度已知丁鹉，使用絕對定位+transform
.father {
background-color: green;
position: relative;
width: 400px;
height: 400px;
}
.center {
background-color: orange;
list-style-type: none;
padding: 0;
position: absolute;
width: 50%;
height: 50%;
margin: auto;
top: 50%;
left: 50%;
/* 元素從當前位置妒潭，向左向下移動 */
transform: translate(-50%, -50%);
}
效果：
image.png
優(yōu)點：
內容高度可變悴能，可以使用百分比
缺點：
不兼容IE8;會與其他transform樣式沖突。
5.寬度不定雳灾，使用text-align:center+display:inline-block
.father {
background-color: green;
text-align: center;
}
.center {
background-color: orange;
display: inline-block;
}
效果
image.png
適用：
只能對圖片漠酿、按鈕、文字等行內元素（display為inline或inline-block等）進行水平居中谎亩。在IE6炒嘲、7這兩個瀏覽器中，它是能對任何元素進行水平居中的匈庭。
6.寬度不定夫凸，使用彈性盒子的justify-content屬性
.father {
background-color: green;
text-align: center;
display: flex;
justify-content: center;
}
.center {
background-color: orange;
}
效果
image.png
7.使用display:table-cell
.father {
background-color: green;
display: table-cell;
width: 400px;
height: 400px;
vertical-align: middle;
}
.center {
background-color: orange;
list-style-type: none;
width: 50%;
padding: 0;
margin: 0 auto;
}
效果：
image.png
原理：
對于那些不是表格的元素，我們可以通過display:table-cell 來把它模擬成一個表格單元格阱持，這樣就可以利用表格那很方便的居中特性了夭拌。
優(yōu)點：瀏覽器兼容性好
