在 CSS 中进行中心对齐，并设定相同宽度的效果有何影响

发布时间：2023-10-20 09:17:49 所属栏目：Windows 来源：

导读：关于“CSS中实现水平居中宽度的影响是什么”的知识有一些人不是很理解，对此小编给大家总结了相关内容，具有一定的参考借鉴价值，而且易于学习与理解，希望能对大家有所帮助，有这个方面学习需要的朋友就继

关于“CSS中实现水平居中宽度的影响是什么”的知识有一些人不是很理解，对此小编给大家总结了相关内容，具有一定的参考借鉴价值，而且易于学习与理解，希望能对大家有所帮助，有这个方面学习需要的朋友就继续往下看吧。

水平居中还是比较容易的，先看子元素是固定宽度还是宽度未知。

1、固定宽度这种方式是绝对定位居中，除了使用margin，还可以使用transform。

.container{
width: 300px;
height: 200px;
background: pink;
position: relative;
}
.inner{
width: 100px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -50px;
background: #fff;
text-align: center;
}
2、宽度未知将子元素设置为行内元素，然后父元素设置text-align: center。

.container{
width: 300px;
height: 200px;
background: pink;
position: relative;
text-align: center;
}
.inner{
display: inline-block;

}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!