元素的经典居中问题

相信大家在开发中都会遇到元素的居中问题,而且有些是要跟随浏览器窗口大小的变化但元素永远保持居中位置,下面是我总结的几种常用方法:

1.相对于浏览器窗口居中

css3方法:

	#box{
		width: 200px;
		height: 200px;
		background: pink;
		/*css3居中*/
		position: absolute;/*fixed也行*/
		left: calc(50% - 100px);
		top: calc(50% - 100px);
		}

常规css方法1:

	#box{
		width: 200px;
		height: 200px;
		background: pink;
		position: absolute;
                top: 50%;
		left: 50%;
		margin-left: -100px;
		margin-top: -100px;
		}

常规css方法2:

将上下左右边距（相对于浏览器窗口边缘）全设为0，使浏览器推算出的外边距上下、左右对应相等可以设置任何其他相等的值，但如果窗口小到不能容下任意一个方向的两侧边距，元素也将不居中，所以推荐设为0

	#box{
		width: 200px;
		height: 200px;
		background: pink;
		position: absolute;
                top: 0;
		left: 0;	
		bottom: 0;
		right: 0;
		margin:auto;
		}

注意点:这种方法在相对于父级元素居中的问题上一样可行,下面再添加一个子元素相对于父级元素居中的方法

通过为父元素启用弹性盒布局解决子元素水平垂直居中的问题:

html:

<div class="parent">
     <div class="child"></div>
</div>

css:

	div.parent {
            /* 启用弹性盒布局 */
            display: flex;
            /* 使子元素水平居中 */
            justify-content: center;
            /* 使子元素垂直居中 */
            align-items: center;
            width: 50%;
            height: 200px;
            background-color: aquamarine;
        }

        div.child {
            width: 30%;
            height: 100px;
            background-color: antiquewhite;
        }

效果图:

2.js实现元素相对于浏览器窗口居中问题

		<script type="text/javascript">
			window.onload = function(){
				centerElement("box3");
			}
			
			function centerElement(id){
				//基于浏览器窗口
				var boxDom = document.getElementById(id);
				var cleft = 0;
				var ctop = 0;
				var bw = boxDom.offsetWidth;//需要给盒子设置定位才会生效
				var bh = boxDom.offsetHeight;
				var dw = window.innerWidth;
				var dh = window.innerHeight;
				cleft = (dw - bw)/2;
				ctop = (dh - bh)/2;
				boxDom.style.left =cleft+ "px";
				boxDom.style.top = ctop+"px";
				window.onresize = function(){
					centerElement(id)
				}
			}
		</script>

还有更多关于居中的方法可以点击这里！
以上就是实现元素居中的一些方法,后期如有更好的方法也会继续加进来,或者各位大佬们有好的方法不妨分享一度,阿里嘎多!!!