一： 水平居中
1. margin: 0 auto (設(shè)置當(dāng)前元素)
<body>
<!-- 水平居中方法 1 -->
<div class="center">
<p>水平居中</p>
</div>
</body>
.center p {
width: 200px;
margin: 0 auto;
background-color: #555;
}
2. 父元素設(shè)置: text-align: center
1. 只能對(duì)圖片, 按鈕, 文字等 行內(nèi)元素 (display為inline 或 inline-block等) 進(jìn)行水平居中 。
2. 在 IE6、7 這兩個(gè)奇葩的瀏覽器中, 它是能對(duì)任何元素進(jìn)行水平居中的 。
<body>
<!-- 水平居中方法 2 -->
<div class="center2">
<button>按鈕</button>
</div>
</body>
.center2 {
text-align: center;
}
3. 浮動(dòng)《 結(jié)合 position:relative 》實(shí)現(xiàn)水平居中
<body>
<!-- 水平居中方法 3 -->
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</body>
.pagination {
float: left;
width: 100%;
overflow: hidden;
position: relative;
background-color: bisque;
}
.pagination ul {
clear: left;
float: left;
position: relative;
left: 50%;
text-align: center;
background-color: #666;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
display: block;
float: left;
position: relative;
right: 50%;
}
.pagination a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border: 1px solid #333;
border-radius: 2px;
}
.pagination a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset, 0 1px 0 #0a0a0a;
background: linear-gradient(top, #f48b03, #c87100);
}
4. position:absolute 絕對(duì)定位實(shí)現(xiàn)水平居中
1. 適用于父元素和子元素的寬度都確定的情況 。
2. 父元素 position: relative; 子元素給剩余寬度一半的 margin-left 。
<body>
<!-- 水平居中方法 4 -->
<div class="out">
<p class="in">水平居中方法 4</p>
</div>
</body>
.out {
background-color: #c87100;
width: 100%;
position: relative;
height: 300px;
}
.in {
position: absolute;
left: 50%;
width: 300px;
margin-left: -150px;
background-color: blueviolet;
}
5. display:flex 彈性布局實(shí)現(xiàn)居中
6. 通過(guò) transform 實(shí)現(xiàn) CSS 水平居中
二： 垂直居中
1. 在父元素中設(shè)置 display: table-cell 屬性 <此元素會(huì)作為一個(gè)表格單元格顯示>, 結(jié)合 vertical-align: middle;
<body>
<div class="box box1">
<span>垂直居中</span>
</div>
</body>
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: red;
height: 300px;
width: 800px;
}
2. 父元素使用彈性布局 display : flex; align-items:center;
<body>
<div class="box1 box2">
<span>垂直居中</span>
</div>
</body>
.box2{
display: flex;
justify-content:center;
align-items:Center;
height: 300px;
width: 800px;
background-color: red;
}
3. 父元素設(shè)置 display: flex 和 子元素設(shè)置 margin: auto
<body>
<div class="box1 box2 box3 box4 box6 box7 box8">
<div>垂直居中</div>
</div>
</body>
.box8{
display: flex;
text-align: center;
height: 300px;
width: 100%;
background-color: red;
}
.box8 div{
margin: auto;
width: 100px;
height: 100px;
background-color: brown;
}
4. 父元素相對(duì)定位 position:relative, 子元素絕對(duì)定位 position: absolute 和 負(fù) margin
<body>
<div class="box1 box2 box3">
<span>垂直居中</span>
</div>
</body>
.box3{
position:relative;
height: 300px;
width: 800px;
background-color: red;
}
.box3 span{
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
}
5. 父元素設(shè)置 position: relative 相對(duì)定位; 子元素設(shè)置 position: absolute; transform:translate(-50%,-50%);
<body>
<div class="box1 box2 box3 box4 box6">
<span>垂直居中</span>
</div>
</body>
.box6 {
height: 300px;
width: 100%;
background-color: red;
position: relative;
}
.box6 span{
position: absolute;
top:50%;
left:50%;
width: 200px;
transform:translate(-50%,-50%);
text-align: center;
background-color: cadetblue;
}
6. 父元素 position: relative 相對(duì)定位, 子元素 position: absolute 絕對(duì)定位和 0《做遮罩可以使用》
<body>
<div class="box1 box2 box3 box4">
<span>垂直居中</span>
</div>
</body>
.box4 {
height: 300px;
width: 100%;
background-color: red;
position: relative;
}
.box4 span{
width: 200px;
height: 200px;
background-color: cadetblue;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
7. 父元素 display:inline-block 和 :after 來(lái)占位
<body>
<div class="box1 box2 box3 box4 box6 box7">
<div>垂直居中</div>
</div>
</body>
.box7{
text-align:center;
font-size:0;
height: 300px;
width: 100%;
background-color: red;
}
.box7 div{
vertical-align:middle;
display:inline-block;
font-size:16px;
width: 100px;
height: 100px;
background-color: brown
}
.box7:after{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
