|
在咱们平常研发的时候，经常会运用到css 的居中布局，不论是移动端还是咱们的pc端，今天总结归纳几种css居中布局的办法，代码能够自己修改 ，为了演示，因此自己加 了宽高，有错误欢迎大众指正。
1： 水平居中办法 ：
css代码一：
.parent{
text-align: center;
width: 500px;
height: 500px;
margin: 10px auto;
bac公斤round: #ccc;
}
.parent .child{
display: inline-block;
padding: 10px;
bac公斤round: pink;
}
css代码二：
.parent{
bac公斤round: #ccc;
width: 600px;
height: 600px;
margin: 20px auto;
position: relative;
}
.parent .child{
position: absolute;
left: 50%;
bac公斤round: pink;
padding: 10px;
transform:translateX(-50%);
}
html代码：
<div class="parent">
<div class="child">
我是垂直居中表示
</div>
</div>
2:垂直居中办法：
css代码一:
.parent{
display: table-cell;
vertical-align: middle;
width: 500px;
height: 600px;
bac公斤round: #ccc;
}
.parent .child{
bac公斤round: pink;
padding: 10px;
width: 100px;
}
html代码：
<div class="parent">
<div class="child">
我是垂直居中表示
</div>
</div>
3:垂直水平都居中：
css代码一：
.parent{
text-align: center;
bac公斤round: #ccc;
height: 600px;
width: 600px;
display: table-cell;
vertical-align: middle;
}
.parent .child{
display: inline-block;
bac公斤round: pink;
padding: 10px;
width: 150px;
height: 150px;
}
css代码二：
.parent{
bac公斤round: #ccc;
height:400px;
width: 400px;
position: relative;
}
.child{
bac公斤round: pink;
padding: 10px;
width: 150px;
height: 150px;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
}
css代码最后版本：
.parent{
display: flex;
justify-content: center;
align-items: center;
bac公斤round: #ccc;
height:600px;
width: 400px；
}
.child{
bac公斤round: pink;
padding: 10px;
width: 150px;
height: 150px;
}
html代码
<div class="parent">
<div class="child">
我是垂直居中和水平居中表示
父级体积，子集体积 ，不固定能够随意更改体积
</div>
</div>
| 
发表于 2024-6-30 09:46:41
