目录
一.脱离文档流
只要是脱离文档流,都是使用的是父相子绝(父块相对定位,子块绝对定位),
有三种方式:
-
有无宽高都可
-
1.父相子绝 可以使用
margin
:auto
-
2.父相子绝
transform
:translatex
-
有宽高
-
3.父相子绝
margin-top 一半
1.有没有宽高都可以
下面两种方法都是需要父相子绝(父块相对定位,子块绝对定位),在子块中设置
方法一 margin:auto
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>
</title>
-
<style type="text/css">
-
-
.box1{
-
width:
100%;
-
height:
100%;
-
border:
1px solid red;
-
}
-
.box2{
-
width:
400px;
-
height:
400px;
-
background-color:skyblue;
-
position: relative;
-
}
-
.box3{
-
width:
100px;
/*1.width:90%也可以 2.不设置宽也可以*/
-
height:
100px;
/*1.height:90%也可以 2.不设置高也可以*/
-
background-color: gray;
-
position: absolute;
-
top:
0;
-
right:
0;
-
bottom:
0;
-
left:
0;
-
margin:auto;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="box1">
-
<div class="box2">div2
<div class="box3">div3
</div>
</div>
-
<div>
-
</body>
-
</html>
方法二 transform:translate:
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>
</title>
-
<style type="text/css">
-
-
.box1{
-
width:
100%;
-
height:
100%;
-
border:
1px solid red;
-
}
-
.box2{
-
width:
400px;
-
height:
400px;
-
background-color:skyblue;
-
position: relative;
-
}
-
.box3{
-
width:
100px;
/*width:90%也可以 但 margin-top margin-left 也需要改成百分形式*/
-
height:
100px;
/*height:90%也可以 但 margin-top margin-left 也需要改成百分形式*/
-
background-color: gray;
-
position: absolute;
-
top:
50%;
-
left:
50%;
-
transform:
translate(-50%,-50%);
-
}
-
</style>
-
</head>
-
<body>
-
<div class="box1">
-
<div class="box2">div2
<div class="box3">div3
</div>
</div>
-
<div>
-
</body>
-
</html>
2.必须要有宽高
方法一 margin-top margin-left
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>
</title>
-
<style type="text/css">
-
-
.box1{
-
width:
100%;
-
height:
100%;
-
border:
1px solid red;
-
}
-
.box2{
-
width:
400px;
-
height:
400px;
-
background-color:skyblue;
-
position: relative;
-
}
-
.box3{
-
width:
100px;
/*width:90%也可以 但 margin-top margin-left 也需要改成百分形式*/
-
height:
100px;
/*height:90%也可以 但 margin-top margin-left 也需要改成百分形式*/
-
background-color: gray;
-
position: absolute;
-
top:
50%;
-
left:
50%;
-
margin-top: -
50px;
-
margin-left: -
50px;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="box1">
-
<div class="box2">div2
<div class="box3">div3
</div>
</div>
-
<div>
-
</body>
-
</html>
二.没有脱离文档流
有3种方法
-
有无宽高都可:
-
1.(父)
-
display
:flex;
/*将其定义为弹性容器*/
-
align-items:
center;
/*垂直居中对齐*/
-
justify-content:
center;
/*水平居中对齐*/
-
-
2.
-
(父)
display
:flex
-
(子)
margin
:auto
-
-
有宽高
-
1.
-
(父)
display
:table-cell;
-
vertical-align:
middle;(垂直居中)
-
(子)
margin
:0
auto(水平居中)
1.有无宽高都可
方法一:
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>
</title>
-
<style type="text/css">
-
-
.box1{
-
width:
100%;
-
height:
100%;
-
border:
1px solid red;
-
}
-
.box2{
-
width:
400px;
-
height:
400px;
-
background-color:skyblue;
-
display:flex;
/*将其定义为弹性容器*/
-
align-items: center;
/*垂直居中对齐*/
-
justify-content: center;
/*水平居中对齐*/
-
}
-
.box3{
-
/* 宽高可以不设置
-
width:100px;
-
height:100px;*/
-
background-color: gray;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="box1">
-
<div class="box2">
<div class="box3">div3
</div>
</div>
-
<div>
-
</body>
-
</html>
方法二:
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>
</title>
-
<style type="text/css">
-
-
.box1{
-
width:
100%;
-
height:
100%;
-
border:
1px solid red;
-
}
-
.box2{
-
width:
400px;
-
height:
400px;
-
background-color:skyblue;
-
position: relative;
-
display:flex;
/*最新特性*/
-
}
-
.box3{
-
/*有无宽高都可以*/
-
/*width:100px;
-
height:100px;*/
-
background-color: gray;
-
margin:auto;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="box1">
-
<div class="box2">
<div class="box3">div3
</div>
</div>
-
<div>
-
</body>
-
</html>
2.有宽高
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>
</title>
-
<style type="text/css">
-
-
.box1{
-
width:
100%;
-
height:
100%;
-
border:
1px solid red;
-
}
-
.box2{
-
width:
400px;
-
height:
400px;
-
background-color:skyblue;
-
/*父块设置垂直居中*/
-
display: table-cell;
-
vertical-align: middle;
-
}
-
.box3{
-
width:
100px;
-
height:
100px;
-
background-color: gray;
-
margin:
0 auto;
/*子块设置水平居中*/
-
}
-
</style>
-
</head>
-
<body>
-
<div class="box1">
-
<div class="box2">div2
<div class="box3">div3
</div>
</div>
-
<div>
-
</body>
-
</html>
513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
