程度居中
- 内联元素
text-align:center
- 块级元素程度居中
定宽状况下:
1、利用 margin
margin-left:auto;
margin-right:auto;
2、margin 负值 + 相对定位
<!DOCTYPE html>
<html>
<head>
<style>
.parent{
position: relative;
width: 100%;
}
.child{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
background-color: cyan;
}
</style>
</head>
<body>
<div class="parenet">
<p class="child">margin 负值 + 相对定位设置程度居中 </p>
</div>
</body>
</html>
3、相对定位 +margin auto
<!DOCTYPE html>
<html>
<head>
<style>
.parent{
position: relative;
width: 100%;
}
.child{
width: 200px;
height: 200px;
position: absolute;
left: 0;
right: 0;
margin: auto;
background-color: cyan;
}
</style>
</head>
<body>
<div class="parenet">
<p class="child"> 相对定位 +margin auto 设置程度居中 </p>
</div>
</body>
</html>
4、flex 布局
<!DOCTYPE html>
<html>
<head>
<style>
.parent{
display: flex;
justify-content: center;
width: 100%;
}
.child{
width: 200px;
background-color: cyan;
}
</style>
</head>
<body>
<div class="parent">
<p class="child">flex 程度居中 </p>
</div>
</body>
</html>
宽度未知状况下:
1、相对定位, 左右间隔设置雷同
<!DOCTYPE html>
<html>
<head>
<style>
.parent{position: relative;}
.child{
position: absolute;
left:25%;
right: 25%;
background-color: cyan;
}
</style>
</head>
<body>
<div class="parenet">
<p class="child"> 相对定位设置程度居中,宽度未知 </p>
</div>
</body>
</html>
2、相对布局 +translate
<!DOCTYPE html>
<html>
<head>
<style>
.parent{position: relative;}
.child{
position: absolute;
left: 50%;
transform: translate(-50%);
background-color: cyan;
}
</style>
</head>
<body>
<div class="parenet">
<p class="child"> 相对定位设置程度居中,宽度未知 </p>
</div>
</body>
</html>
垂直居中
- 行内元素状况
height 和 line-height 相等 - 块级元素
和程度居中解决原理雷同