版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/skye_95/article/details/86546974
-
水平居中
方法一：子元素设置margin: 0 auto;
适用场景：子元素宽度已知
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中布局</title>
<style>
.container_one{
width: 200px;
height: 200px;
border: 1px solid black;
}
.child_one{
width: 100px;
height: 100px;
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container_one">
<div class="child_one">水平居中</div>
</div>
</body>
</html>结果：
方法二：父元素设置text-align: center; 子元素设置display: inline-block;
适用场景：子元素和父元素的宽度已知或未知都可实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中布局</title>
<style>
.container_one{
width: 200px;
height: 200px;
border: 1px solid black;
}
.child_one{
width: 100px;
height: 100px;
margin: 0 auto;
border: 1px solid red;
}
.container_two{
/*width: 200px;*/
height: 200px;
text-align: center;
border: 1px solid black;
}
.child_two{
/*width: 100px;*/
height: 100px;
display: inline-block;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container_one">
<div class="child_one">水平居中</div>
</div>
<div class="container_two">
<div class="child_two">垂直居中</div>
</div>
<!--<div class="container_three">-->
<!--<div class="child_three">水平垂直居中</div>-->
<!--</div>-->
</body>
</html>结果：
方法三：利用浮动实现。父元素向右相对偏移自身宽度的一半，子元素向左偏移自身宽度的一半。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中布局</title>
<style>
.container_one{
width: 500px;
height: 400px;
border: 1px solid black;
}
.child_one{
width: 400px;
height: 300px;
position: relative;
left: 50%;
border: 1px solid red;
}
.box{
width: 100px;
height: 100px;
position: absolute;
left: -50px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="container_one">
<div class="child_one">
<div class="box">水平居中</div>
</div>
</div>
</body>
</html>
-
垂直居中
方法一：通过display:flex实现CSS垂直居中。给父元素设置display:flex;子元素设置align-self:center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中布局</title>
<style>
.container_one{
width: 500px;
height: 400px;
display: flex;
border: 1px solid black;
}
.child_one{
width: 200px;
height: 200px;
align-self: center;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container_one">
<div class="child_one">
水平居中
</div>
</div>
</body>
</html>
方法二：给父元素添加伪元素:before
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中布局</title>
<style>
.container_one{
width: 500px;
height: 400px;
display: block;
border: 1px solid black;
}
.container_one:before{
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.child_one{
width: 200px;
height: 200px;
display: inline-block;
vertical-align: middle;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container_one">
<div class="child_one">
水平居中
</div>
</div>
</body>
</html>
方法三：使用定位实现垂直居中。父元素设置position: relative;子元素设置position: absolute; top: 50%; margin-top: -自身宽度的一半;与父元素的距离为父元素宽度的50%，外上边距为-自身宽度的50%。
适用场景：被居中块级元素的尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中布局</title>
<style>
.container_one{
width: 500px;
height: 400px;
position: relative;
border: 1px solid black;
}
.child_one{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
margin-top: -100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container_one">
<div class="child_one">
水平居中
</div>
</div>
</body>
</html>
-
水平垂直居中
方法一：适用定位实现。父元素设置position: relative;子元素设置position: absolute; left: 50%; top: 50%; margin-top: -自身高度的一半; margin-left: -自身宽度的一半;
适用场景：子元素宽高已知
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中布局</title>
<style>
.container_one{
width: 500px;
height: 400px;
position: relative;
border: 1px solid black;
}
.child_one{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container_one">
<div class="child_one">
水平居中
</div>
</div>
</body>
</html>
方法二：使用定位实现。父元素设置position: relative;子元素设置position: absolute; left:0; right:0; top:0; bottom:0; margin: auto;
思想与方法一一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中布局</title>
<style>
.container_one{
width: 500px;
height: 400px;
position: relative;
border: 1px solid black;
}
.child_one{
width: 100px;
height: 100px;
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container_one">
<div class="child_one"></div>
</div>
</body>
</html>