css 开发问题及解决方案_css开发方案-CSDN博客

本文深入探讨了使用CSS实现元素居中的多种方法，包括垂直居中、水平居中及同时垂直和水平居中的技巧。此外，还介绍了如何优化input和textarea的占位符样式，以及在移动端适配中消除特定元素阴影和浮动问题的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

居中

1.垂直居中

{position: absolute; top: 50%; transform: translateY(-50%);}

2.水平居中（同级无其他元素）
子级设置 width、margin: 0 auto;

3.水平及垂直居中（同级有其他元素）
父级设置position: relative;
子级设置 width、 height、 margin:0 auto; position:absolute; top:0; bottom:0; left:0; right:0;

内容过长显示...

span{display: block; width: 13rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

修改input、 textarea的提示文字样式

textarea::-webkit-input-placeholder {color: #ccc; font-weight: normal;}
input::-webkit-input-placeholder {color: #ccc; font-weight: normal;}

移动端适配

1.避免ios中select、 input、 textarea出现阴影

textarea{box-shadow: 0px 0px 0px rgba(0,0,0,0); -webkit-appearance: none;}
input[type="text"]{box-shadow: 0px 0px 0px rgba(0,0,0,0); -webkit-appearance: none;}

2.清除android上的样式浮动

.clear:after{content:"200B"; display:block; clear:both; content:""; visibility:hidden; height:0;}

设置 margin-bottom 使得一个页面内能放入的内容，居于底部的部分不会覆盖输入区域（当input输入区域位于可视区域1/2以上时，不向上弹动）