CSS的四种水平垂直居中方案

网页的水平垂直居中方案

​

常言讲，人类已经成功创造出登陆月球的方法，但仍没能创造出一套完美的垂直水平居中方案，这里为大家列出四种垂直水平居中方案，各有利弊，酌情使用：

1.position定位居中

​ 将定位四个方向全定义为0像素，让边距自适应：

#box{
    position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	margin:auto;
}

2. position+transform定位加2D变化居中

​ 将元素的绝对定位absolute的 左 、上 定义为百分之五十，再将元素用2D平移向 左、上 移动负百分之五十即可实现垂直水平居中：

#box{
    position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%); 
}

3.flex居中

​ 很多小伙伴不知道的是flex其实也可以做垂直水平居中，用它居中其实很简单，只需要将它的主轴、侧轴的富裕空间设为居中即可：

至于flex本篇就不做详解了，有意向的朋友可去自行查看文档学习

#box{
    display:flex;
	justify-content: center;
	align-items: center;
}

4.使用宽度定位

​ 使用宽度定位，有一定限制，因为他是作用于子集的，将自身宽度设为100%，让其内容center即可：

#box{
    width:100%;
	text-align:center;
}

结语：

​ 四种居中方案各有利弊，酌情使用，如果有更好的方案，欢迎随时向笔者联系！