居中的几种方法

Posted 2020-10-12 bingo1717

一：通过margin负值

.one{ position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin-left: -100px;}

兼容性好，但是必须要定宽高

二：通过margin:auto

.two{ position: absolute; width: 200px; height:200px; margin: auto 0;}

以上两种方法都可以把absolute换成fixed,注意，fixed在ie下不支持

三:行内元素居中

.three{ width: 100px; height: 100px; line-height: 100px; text-align: center;}

这种方法只能居中行内元素。常用于文字对其居中

四：transform居中

.four{ position: absolute; top: 50%; height: 50%; transform: translate(-50%, -50%);}

存在css3浏览器兼容问题

五：flex布局

.five{ display: flex; align-items: center; justify-content: center;}

存在css3浏览器兼容问题

E {box-shadow: <length> <length> <length>?<length>?||<color>}
也就是：
E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
换句说：
对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-box-shadow ? w3cplus.com