css设置垂直居中
时间：2023-03-31 00:45:46
CSS
CSS设置垂直居中元素的垂直居中也是我们日常网页布局中经常遇到的问题，所以我在这里提供一些解决方案，希望能给有需要的人一些参考和参考。HTML代码：Texthere
既然设置了子元素的垂直居中，那么就要知道parent的高度元素才能知道所谓的中心在哪里，对吧？就像你要站在一段距离的中间，那么你首先要知道这段距离有多长，才能知道中间在哪里。注意我所有的百分比高度和宽度都是基于html,body{width:100%;height:100%;}基于这个设置的，如果不设置这个，.parentdiv的父元素是body，和你没有设置body的宽高，你可能看不到效果，.parentdiv的高宽比是相对于它的父元素的，所以你需要确保.parentdiv设置了宽度和高度。(1)内联文字在css代码中垂直居中:.parent{height:100px;边框：1px实心#ccc；/*设置边框是为了方便查看效果*/}.child{line-height:100px;}(2)将行中的非文字垂直居中（以img为例）html代码：
csscode.parent{height:100px;边框：1px实心#ccc；/*设置边框是为了方便查看效果*/}.parentimg{//注意图片本身的高度或者你设置的高度要小于父元素的200px行高，否则你不会看到居中效果。line-height:100px;}(3)未知高度的块级元素垂直居中HTML代码：
sddvsdsdfvsdvds 第一种方法（不需要加padding）：css代码：.parent{width:100%;高度：100%；位置：相对；/*display:table;*/}.child{width:500px;边框：1px实心#ccc；/*设置边框以便于查看*/position:absolute;顶部：50%；transform:translateY(-50%);}方法二（不使用transform）：css代码：.parent{position:relative;宽度：100%；高度：100%；}.child{宽度：500px；边框：1px实心#ccc；位置：绝对；顶部：0；底部：0；左：0；右：0；高度：30%；margin:auto;}第三种方法（需要加padding）：css代码：#parent{padding:5%0;}#child{padding:10%0;}第四种方法：（使用display:table,这个方法也适用于行内文本元素的居中）：csscode:.parent{width:100%;高度：100%；显示：表格；}.child{显示：表格单元格；vertical-align:middle;}第五种方法（flex布局，这里需要考虑兼容性！）css代码：.parent{width:100%;高度：100%；/*这必须是写入高度！*/显示：弹性；对齐项目：居中；证明内容：居中；}(4)已知高度的块级元素在html代码中垂直居中：