css中实现垂直居中详解编程语言

我们都清楚元素相对于父级水平居中的方法：对于inline元素，为父级设置text-align: center。对于定宽的block元素，设定其margin: 0 auto 然而垂直居中的方法并没有这么简单

vertical align

第一个反应是实现垂直居中的方法应该是vertical-align: middle 该属性定义行内元素的基线的垂直对齐，在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式，这个方式确实直观有效，但其适用范围仅仅限于table cell中的内容

 div class = "parent" 

 div class = "child" Content /div 

 /div 

 .parent { display: table }

 .child { 

 display: table-cell; 

 vertical-align: middle; 

 }

line-height

该方法使用与单行文本或图片的垂直居中，我们需要做的仅仅是将line-height属性设置大于font-size，且等于容器的高度

 div class = "parent" 

 div Text here /div 

 /div 

 .parent { 

 height: 200px; /*不必要*/ 

 line-height: 200px; 

 .child { 

 //也可以是 

 .parent { 

 height: 200px; /*不必要*/ 

 .child { 

 line-height: 200px; 

 }

可以看到单行文本垂直居中了，但是！如果是多行文本就非常尴尬了，因为这样做的原理是设置或继承了子元素的line-height，让它等于父容器的height，所以对多行文本不适用
图片也一样

 div class = "parent" 

 img src="./sysuzhyupeng.png" / 

 /div 

只是子元素要设置vertical-align调整基线位置

 .parent { 

 height: 200px; /*不必要*/ 

 line-height: 200px; 

 .child { 

 vertical: middle; /*调整基线位置*/ 

 }

绝对定位+负Margin

这里通过绝对定位将目标元素左上角定位在父级元素接近中央位置，然后通过设定该元素的margin为负值来对准中心位置，这个使用于所有block元素

 div class = "parent" 

 div class = "child" Content /div 

 /div 

 .parent { 

 position: relative; 

 .child { 

 position: absolute; 

 left: 50%; 

 top: 50%; 

 height: 30%; 

 width: 50%; 

 margin: -15% 0 0 -25%; /* margin为负值且为自身尺寸的一半*/ 

 }

然而，这种方法经常会出现父级容器中的内容溢出，所以最好在知道父级元素的宽度和高度时使用该方法。

绝对定位和transform3d

这个和上面方法差不多，只是把负margin改成设置目标元素的transform属性来对准中心位置，适用与所有block元素。

 div class = "parent" 

 div class = "child" Content /div 

 /div 

 .parent { 

 position: relative; 

 .child { 

 position: absolute; 

 left: 50%; 

 top: 50%; 

 height: 30%; 

 width: 50%; 

 transform: translated3d(-50%, -50%, 0); 

 /* 向左向上移动自身尺寸的一半 */ 

 }

这种方法的缺点是兼容性不好，IE8以下不支持

绝对定位四个方向暴力居中

通过给子元素设绝对定位并设置top, bottom, right和left为0，最后设 margin为auto，将元素拉伸后再让上下和左右margin相等，实现居中，适用于所有block元素

 div class = "parent" 

 div class = "child" Content /div 

 /div 

这种方法的缺点是兼容性不好，IE8以下不支持

 .parent { 

 position: relative; 

 height: 300px; 

 .child { 

 position: absolute; 

 top: 0; 

 bottom: 0; 

 left: 0; 

 right: 0; 

 width: 50%; 

 height: 30%; 

 margin: auto 

 }

CSS3中的Flex布局

将父级容器设置为Flex容器，并规定子项目的排列方式。

 div class = "parent" 

 div class = "child" Content /div 

 /div 

 .parent { 

 position: flex; 

 display: -webkit-box; 

 display: -webkit-flex; 

 display: -moz-box; 

 display: -moz-flex; 

 display: -ms-flexbox; 

 /* 子元素主轴(默认是水平轴)上居中 */ 

 -webkit-box-align: center; 

 -moz-box-align: center; 

 -ms-flex-pack: center; /* IE10 */ 

 -webkit-justify-content: center; 

 -moz-justify-content: center; 

 justify-content: center;/* 现代浏览器 */ 

 /* 子元素交叉轴(默认是纵轴)上居中 */ 

 -webkit-box-pack: center; 

 -moz-box-pack: center; 

 -ms-flex-align: center; /* IE10 */ 

 -webkit-align-content: center; 

 -moz-align-item: center; 

 align-items: center; 

 height: 300px; 

 .child { 

 width: 150px; 

 height: 130px; 

 }

支持CSS3的浏览器可用，但是浏览器厂商的属性各异，导致前缀眼花缭乱

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/13502.html

cjava