一个子元素如何在父元素内居中?实现如图的样子
1、行内元素
如果子元素是行内元素,就可以用这种方法。父元素text-align:center,子元素设置行高line-height:父元素的高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
width: 500px;
height: 300px;
background-color: orange;
text-align: center;
}
.son{
background-color: pink;
line-height: 300px;
}
</style>
</head>
<body>
<div class="parent">
<span class="son">
我是子元素,我要居中
</span>
</div>
</body>
</html>
2、弹性盒子flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
width: 500px;
height: 300px;
background-color: orange;
display: flex;
justify-content: center;
align-items: center;
}
.son{
background-color: pink;
}
</style>
</head>
<body>
<div class="parent">
<span class="son">
我是子元素,我要居中
</span>
</div>
</body>
</html>
3、利用定位来实现居中。
子元素相对于父元素绝对定位,并且margin值减去自己宽高的一半 。
首先利用定位让子元素移动到元素的50%,创建出一个中线,再让子元素左移动它自身的一半。相当于以中线为基准,左移动自身一半,那么剩下在右边的就是另一半。
该方法具有一定的局限性,因为其必须要知道子元素本身的宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
width: 500px;
height: 300px;
background-color: orange;
position: relative;
}
.son{
width: 100px;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
left: 50%;
margin-left: -50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="parent">
<span class="son">
我是子元素,我要居中
</span>
</div>
</body>
</html>
理解:
1、未设置前,图是这样
2、用定位让子元素挪移到父元素的50%,以此作为父元素左半边和右半边
3、此时子元素移动它自身的一半,就实现了左右相等(左右居中)。以此类推,再同样设置高,就完成了上下左右居中。
4、 利用定位来实现居中(推荐)。
子元素相对于父元素绝对定位,并且margin值设置为:auto
这个方法比第三种好,因为不需要知道子元素的宽高,可以直接设置。推荐用这种。
如果需要定位在页面正中央,就把absolute更换成fixed就ok
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
width: 500px;
height: 300px;
background-color: orange;
position: relative;
}
.son{
width: 100px;
height: 50px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: pink;
}
</style>
</head>
<body>
<div class="parent">
<span class="son">
我是子元素,我要居中
</span>
</div>
</body>
</html>
5、利用Css3的变形属性,translate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
width: 500px;
height: 300px;
background-color: orange;
position: relative;
}
.son{
width: 100px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
transform: translate( -50%, -50%);
background-color: pink;
}
</style>
</head>
<body>
<div class="parent">
<span class="son">
我是子元素,我要居中
</span>
</div>
</body>
</html>