在网页开发中，经常会遇到需要居中元素的情况。而CSS的居中样式也相对来说比较常见。但是，在实际使用中，我们可能会遇到CSS居中样式没有效果的问题。本文将探讨可能导致CSS居中样式无效的原因以及解决方法。

/* 垂直居中 */
.parent{
display: flex;
align-items: center;
}
/* 水平居中 */
.parent{
display: flex;
justify-content: center;
}

首先，我们来看看CSS垂直居中：display: flex; align-items: center;这段CSS样式是比较常见的垂直居中方式。但是，如果你在样式中加入了float或position属性，那么这段样式就会失效。因为这两个属性会改变元素的布局方式。

接着，我们来看看CSS水平居中：display: flex; justify-content: center;这是比较常见的水平居中样式。同样的，在这里，如果元素有float或position属性，这段样式也会失效。

给元素设置了display:inline-block;样式也会导致居中样式失效。

另外，若父元素没有设置具体宽高，那么居中样式在浏览器中可能只起到了垂直或水平一种居中的效果。因此，需要为父元素设置宽高，以达到完全居中。

解决以上问题的办法有很多，这里就不一一列举。总之，在编写样式时，要根据具体情况选择适合的样式，尽量避免使用那些会改变元素布局的属性。