水平居中、垂直居中、水平垂直居中
參考：https://www.w3cplus.com/css/centering-css-complete-guide.html
一.水平居中
1.行內元素：
text-align:center即可
2.塊級元素【固定寬度】：
(1).一個固定寬度的塊級元素，使用margin:0 auto即可
css:
.has_width_block {
width: 200px;
background: deeppink;
margin: 0 auto;
}
html:
<div class="has_width_block">
我是有寬度的塊級元素
</
(2).多個固定寬度的塊級元素
(a).將子元素設置為inline-block，再用text-align:center即可
css:
.container {
background: yellowgreen;
width: 1024px;
height: 200px;
text-align: center;
}
.has_width_block {
width: 250px;
background: deeppink;
display: inline-block;
}
html:
<div class="container"
(b).使用flex，設置justify-content:center即可
css:
.container {
background: yellowgreen;
width: 1024px;
height: 200px;
display: flex;
justify-content: center;
}
.item {
width: 250px;
height: 50px;
background: deeppink;
}
html:
<div class="container">
<div class="item">
我是有寬度和高度的元素1
</div>
<div class="item">
我是有寬度和高度的元素2
</div>
<div class="item">
我是有寬度和高度的元素3
</div>
</div>
3.塊級元素【不定寬度】：
(1).單個不定寬元素。將元素設置為inline-block，再設置text-align:center即可
css:
.container {
text-align: center;
}
.thumbnail {
border: 1px solid #000;
display: inline-block;
padding: 5px;
}
html:
<div class="container">
<div class="thumbnail">
<img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png"
/>
<p>描述</p>
</div>
</div>
(2).多個不定寬的元素。使用float:left，配合position:relative+left:50%或right:50%完成居中效果
css:
.pagination {
width: 100%;
overflow: hidden;
}
.pagination>ul {
float: left;
position: relative;
left: 50%;
}
.pagination>ul>li {
float: left;
margin: 0 2px;
padding: 3px 5px;
background: yellowgreen;
position: relative;
right: 50%;
}
html:
<div class="pagination">
<ul>
<li>上一頁</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>下一頁</li>
</ul>
</div>
實現思路如下：
參考http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
- 沒有浮動的div，其寬度為父元素的100%：
- 向左浮動的div，其寬度為內容的大小。這是實現居中的關鍵點。
- 把ul和li都調整成了向左浮動，那麽li的寬度就是內容的寬度，ul的寬度是li寬度的總和
- 將ul設置為position:relative，left:50%。至此，ul元素會相對於外層元素(藍色邊框的“centeredmenu div”)向右偏移50%的寬度
- 最後一步，將li元素設置為position:relative，right:50%。至此，每一個li元素都會相對於ul元素向左偏移50%的寬度。最終達到水平居中的效果
二.垂直居中
1.行內元素：
line-height和height一致即可
2.塊級元素：
(1).固定高度
(a).要求元素有固定的高度。
(b).設置父元素position:relative
(c).設置元素position:absolute、top:50%、margin-top:-height/2。實現思路是先絕對定位元素，然後top:50%將元素的起始點拉到父元素的中心點，最後利用負邊距，將元素垂直居中。
css:
.container {
position: relative;
width: 100%;
height: 500px;
background: gray;
}
.item {
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
background: deeppink;
}
html:
<div class="container">
<div class="item">
固定高度的元素
</div>
</div>
(2).不定高度
(a).設置父元素display:table
(b).設置元素display:table-cell、vertical-align:middle
css:
.container {
display: table;
width: 100%;
height: 500px;
background: gray;
}
.item {
display: table-cell;
vertical-align: middle;
background: deeppink;
}
html:
<div class="container">
<div class="item">
<img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png"
alt="">
</div>
</div>
(3).flex
(a).align-item:center
css:
.container {
display:flex;
align-items: center;
width: 100%;
height: 500px;
background: gray;
}
.item {
background: deeppink;
}
html:
<div class="container">
<div class="item">
<img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png"
alt="">
</div>
</div>
三.水平居中+垂直居中
1.寬高固定或不固定都可
(1).flex
(a).align-items:center
(b).justify-content:center
css:
.container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 500px;
background: gray;
}
.item {
background: deeppink;
}
html:
<div class="container">
<div class="item">
<img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png"
alt="">
</div>
</div>
2.寬高固定
參考http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%e7%bb%9d%e5%af%b9%e5%ae%9a%e4%bd%8d-%e6%b0%b4%e5%b9%b3%e5%9e%82%e7%9b%b4%e5%b1%85%e4%b8%ad/
(1).margin:auto
(a).position:absolute
(b).top、right、bottom、left設置為0
(c).margin:auto
css:
.container {
position: relative;
width: 100%;
height: 500px;
background: gray;
}
.item {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
margin:auto;
background: deeppink;
}
html:
<div class="container">
<div class="item">
width:100px
<br>
height:100px;
</div>
</div>
(2).position+負邊距
css:
.container {
width: 100%;
height: 500px;
position: relative;
background: gray;
}
.item {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
background: deeppink;
}
html:
<div class="container">
<div class="item">
width:100px
<br> height:100px;
</div>
</div>
3.寬高不定
css:
.container {
width: 100%;
height: 500px;
display: table;
text-align: center;
background: gray;
}
.item {
display: table-cell;
vertical-align: middle;
background-clip: content-box;
background: deeppink;
}
html:
<div class="container">
<div class="item">
寬高不定元素
<br> 寬高不定元素
<br> 寬高不定元素
<br> 寬高不定元素
<br>
</div>
</div>
水平居中、垂直居中、水平垂直居中