摘要：两个小栗子讲完了，你明白了么文章末尾，再送两个小栗子当一个里没有内容时高度为，当有内容比如文字时，就有了高度，难道是文字把撑开了其实不是，这个高度是由元素的决定的。代码很简单使用布局也可以实现居中红色框上下居中文字在红色框中居中
之前学习垂直居中的时候在网上找了很多方法，看的我眼花撩乱，一直想着整理一下思路，透过那些纷繁的招式看到本质。
首先明确一下概念：
left是指子元素的左margin距离父元素的左padding的距离
margin：auto是自适应的意思，由浏览器自动计算
translatex：关于x轴的坐标转换，数值为百分数时是相对于本身的宽高。
理解了以上三点，就基本能看懂各种垂直居中方法了
1.top:0;bottom:0;left:0;right:0;margin:auto;这种方法的意思是先把子元素margin和父元素padding的距离置为0，可以理解为子元素和父元素之间没有空隙，然后把margin置为auto，margin平分子元素和父元素之间的距离，也就是说子元素并不是真正意义的居中，只是子元素中间的内容居中了，子元素和父元素之间的距离是计算机自动计算的（平分）；注意这个方法需配合子元素position:absolute使用，因为默认情况下，margin：auto只对上下起作用，对左右不起作用，加上position使元素脱离标准流，margin：auto可识别
.father{
width:400px;
height:400px;
background-color:pink;
position:relative;
}
.son{
width:100px;
height:100px;
background-color:red;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
2.transform：translate()
这种方法适用于不知道父元素宽高的情况下（面试官可能会这样问呢）。这种方法是通过先把元素定位到父元素的百分之五十的位置top:50%;left:50%;看下图：
注意此时子元素的左上角在父元素中间，整个子元素处于父元素右下四分之一的左上角，然后通过transform：translate(-50%，-50%)，使子元素相对自身移动百分之五十，这样子元素就居中啦。需要注意的是自元素中要写定位position:relative;这样才能根据父元素识别到定位的基点。
.father{
width:500px;
height:500px;
background-color:pink;
/*position:relative;*/
}
.son{
width:100px;
height:100px;
background-color: red;
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
两个小栗子讲完了，你明白了么？文章末尾，再送两个小栗子(#^.^#)
3.line-height当一个div里没有内容时高度为0，当有内容比如文字时，div就有了高度，难道是文字把div撑开了？其实不是，这个高度是由元素的line-height决定的。当把line-height设置为该div的高度时，div中的文字就居中显示了。代码很简单
qqqqq
.line{
width:100px;
height:100px;
line-height:100px;
text-align:center;
background:gray;
}
4、table
使用table布局也可以实现居中
qqqqqqqqqq
.father{
width:400px;
height:200px;
display:table-cell;
text-align:center;
vertical-align:middle; //红色框上下居中
background-color:pink;
}
.son{
width:100px;
height:100px;
display:inline-block;
background-color:red;
line-height:100px; //文字在红色框中居中
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52261.html
摘要：两个小栗子讲完了，你明白了么文章末尾，再送两个小栗子当一个里没有内容时高度为，当有内容比如文字时，就有了高度，难道是文字把撑开了其实不是，这个高度是由元素的决定的。代码很简单使用布局也可以实现居中红色框上下居中文字在红色框中居中 之前学习垂直居中的时候在网上找了很多方法，看的我眼花撩乱，一直想着整理一下思路，透过那些纷繁的招式看到本质。首先明确一下概念： left是指子元素的左mar...
摘要：两个小栗子讲完了，你明白了么文章末尾，再送两个小栗子当一个里没有内容时高度为，当有内容比如文字时，就有了高度，难道是文字把撑开了其实不是，这个高度是由元素的决定的。代码很简单使用布局也可以实现居中红色框上下居中文字在红色框中居中 之前学习垂直居中的时候在网上找了很多方法，看的我眼花撩乱，一直想着整理一下思路，透过那些纷繁的招式看到本质。首先明确一下概念： left是指子元素的左mar...
摘要：方法二利用，设置元素结构，并应用实现垂直居中，这种方法的实现可用于多行文本，要求及以上版本。 让元素居中对齐是非常常见的需求，首先是水平居中，要实现水平居中行内元素只需要在其父元素上设置text-align: center即可，对于块级元素来说让它的margin-left: auto和margin-right: auto即可（width不可为auto），那么垂直居中呢？找下css属性发...
阅读 752·2021-09-28 09:35
阅读 2591·2019-08-29 11:25
阅读 2154·2019-08-23 18:36
阅读 1849·2019-08-23 16:31
阅读 2065·2019-08-23 14:50
阅读 3112·2019-08-23 13:55
阅读 3286·2019-08-23 12:49
阅读 2074·2019-08-23 11:46
