居中問題: 1.Fixed定位margin:0 auto;不管用,水平居中需要做如下處理: position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; 2.relative定位margin:0 auto;管用,水平居中需要 ...
居中問題:
1.Fixed定位margin:0 auto;不管用,水平居中需要做如下處理:
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
2.relative定位margin:0 auto;管用,水平居中需要做如下處理:
position: relative;
display: flex;
flex-direction: column;
margin: 0 auto;
3.absolute定位 加margin 元素已知寬度
父元素設置為:position: relative;
子元素設置為:position: absolute;
距上50%,據左50%,然後減去元素自身寬度的距離就可以實現
<div class="box">
<div class="content">
</div>
</div>
.box {
background-color: #FF8C00;
width: 300px;
height: 300px;
position: relative;
}
.content {
background-color: #F00;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
4.absolute定位 加transform 元素未知寬度
如果元素未知寬度,只需將上面例子中的margin: -50px 0 0 -50px;替換為:transform: translate(-50%,-50%);
<div class="box">
<div class="content">
</div>
</div>
.box {
background-color: #FF8C00;
width: 300px;
height: 300px;
position: relative;
}
.content {
background-color: #F00;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
5.flex佈局 (存在相容性問題)
<div class="box">
<div class="content">
</div>
</div>
.box {
background-color: #FF8C00;
width: 300px;
height: 300px;
display: flex;//flex佈局
justify-content: center;//使子項目水平居中
align-items: center;//使子項目垂直居中
}
.content {
background-color: #F00;
width: 100px;
height: 100px;
}
6.able-cell佈局
因為table-cell相當與表格的td,td為行內元素,無法設置寬和高,所以嵌套一層,嵌套一層必須設置display: inline-block;td的背景覆蓋了橘黃色,不推薦使用
<div class="box">
<div class="content">
<div class="inner">
</div>
</div>
</div>
.box {
background-color: #FF8C00;//橘黃色
width: 300px;
height: 300px;
display: table;
}
.content {
background-color: #F00;//紅色
display: table-cell;
vertical-align: middle;//使子元素垂直居中
text-align: center;//使子元素水平居中
}
.inner {
background-color: #000;//黑色
display: inline-block;
width: 20%;
height: 20%;
}
7.js的事件監聽也可以(css可以實現的不推薦使用)
如果是隨屏幕變化,而居中的,也可以使用js
//1.監聽輪播左移動距離
window.addEventListener('resize',changeDivLeft,false)
function changeDivLeft(){
var w = document.documentElement.clientWidth || document.body.clientWidth;
var leftRange = (w-1920)/2;//1920是圖片容器寬度
// console.log(w,leftRange);
$(".swiper-container").css({"left":leftRange});
}
//2.可簡化改版為自執行函數
(function(){
window.onresize = arguments.callee;
var w = document.documentElement.clientWidth || document.body.clientWidth;
var leftRange = (w-1920)/2;//1920是圖片容器寬度
$(".swiper-container").css({"left":leftRange});
})();