css零碎知识点
程序员文章站
2024-01-29 19:43:58
...
<1>div垂直居中
比如始终要固定显示在页面右中部的咨询客服一类的div
1.当div固定宽高时
position: fixed;//若不需要固定，则为absolute
left: 50%;
top: 50%;
width:200px;//当盒子宽高为200*100时
height:100px;
margin-left:-100px;//宽的一半
margin-top:-50px;//高的一半
2.当div不固定宽高时
方法一
//html
<div class="block" style="height: 300px;">
<div class="centered">
<h1>案例题目</h1>
<p>案例内容案例内容案例内容案例内容案例内容</p>
</div>
</div>
//css
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 50%;
}
方法二
//代码
<title>不固定高度div写法</title>
<style>
.center {
position: fixed;
top: 50%;
left: 50%;
background-color: #000;
width:50%;
height: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
/**
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
**/
}
</style>
</head>
<body>
<div class="center"></div>
</body>
方法三：margin:auto进行垂直居中
//html
<div class="father">
<div class="son"></div>
</div>
//css
.father{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background-color:rgba(0,0,0,.7);
}
.son{
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
width:50%;
height:50%;
margin:auto;
background-color:red;
}
<3>用js来实现
//html
<div class="div-box">
.....
</div>
//css
.div-box {
position:fixed;
right:0;
height:120px;
}
//js
function auto(){
var windowHeight = $(window).height(),//获取可见窗口的高度
bottomValue = windowHeight/2-120/2;//计算bottom的值
$(".div-box").css("bottom",bottomVaule+"px");
}
//调用方法
auto()；
//当窗口发生改变时再次调用方法
$(window).resize(function(){
auto();
});
转载于:https://www.jianshu.com/p/283e32462cd6