谈谈CSS实现水平垂直居中布局的方法

互联网 20-8-3

最近面试的时候，面试官问到了CSS水平垂直居中布局的方式，对于刚入前端没多久的我，无疑是一脸懵逼，闲了赶紧查阅资料分析一波，给各位分享一下，避免落坑。

首先先说明一下html和一些基础css样式，下面就不再赘述！html

<body> 		<div class="div1"> 			<div class="box  size">垂直水平居中</div> 		</div> 	</body>

公共css代码如下

<style type="text/css"> 			/* 公共样式 */ 			.div1{ 				width: 300px; 				height: 300px; 				border:1px solid aqua; 				 			} 			.box{ 				background: #00FFFF; 			} 			.box.size{ 				width:100px; 				height:100px; 			} </style>

这些css样式在后续介绍中默认带上，不再赘述！

一、 absolute 和 margin auto（常用）

.div1{ 				position: relative; 			} 			.box{ 				position: absolute; 				top:0; 				left: 0; 				right: 0; 				bottom: 0; 				 				margin: auto; 			}

二、absolute 和margin（负值）

.div1{ 				position: relative; 			} 			.box{ 				top: 50%; 				left: 50%; 				position: absolute; 				margin-top: -50px; 				margin-left: -50px; 			}

三、absolute 和 calc

.div1{ 			   position: relative; 		   } 		   .box{ 			   position: absolute; 			   top: calc(50% - 50px );  				/* 减号前后没有空格，该样式不生效*/ 			   left: calc(50% - 50px ); 		   }

当我在写这段代码的时候，发现一个有趣的事情，calc（50%-50px）如果减号前后没有空格的话，样式就不会生效，写上空格的话，就会正常生效了，具体原因我也不太清楚emmmmm

下面的方法将不需要知晓子元素的宽高即可设置

html修改为：

<body> 		<div class="div1"> 			<div class="box">水平垂直居中，不需要子元素固定宽高</div> 		</div> 	</body>

公共css如下

	.div1{ 				width: 300px; 				height: 300px; 				border: 1px solid red; 			} 			.box{ 				background: #00FFFF; 			}

四、flex（常用）

flex是现代的布局方案仅仅需要几行代码即可实现居中效果

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

五、line-height

利用行内元素居中属性也可以做到水平垂直居中。把box设置为行内元素，通过text-align就可以实现水平居中vertical-align 也可以在垂直方向做到居中（PS：这种方法需要在子元素中将文字显示重置为想要的效果）

          .div1{ 				line-height: 300px; 				text-align: center; 				font-size: 0px; 			} 			.box{ 				font-size: 10px; 				display: inline-block; 				vertical-align: middle; 				line-height:initial; 				/* 修正文字 */ 			 	text-align: left; 	        }

六、absolute 和 transform

不需要子元素宽高固定，但是依赖于translate2d的兼容性

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

七、css-table

css新增的table属性，可以把普通元素改变为table元素的显示效果，也可以实现水平居中

           .div1{ 				display:table-cell; 				text-align: center; 				vertical-align: middle; 			} 			.box{ 				display:inline-block; 			}

以上就是我总结的一些居中布局的方法了，还有什么其他的欢迎补充！

个人感觉： 我比较喜欢 absolute +margin auto 、flex、absolute 和 transform，移动端最好用flex吧，pc端我喜欢absolute +margin auto

相关教程推荐：CSS视频教程、CSS3视频教程

以上就是谈谈CSS实现水平垂直居中布局的方法的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：水平垂直居中

谈谈CSS实现水平垂直居中布局的方法

相关资讯

标签推荐