白癜风诊疗规范 https://m.39.net/pf/a_5334051.html最常用的方法，也是日常web前端开发中用得最多的通过设置line-height属性与当前元素的高度值一致，但是缺点就是目前的元素的高度必须设置为固定值，没有了更多的灵活性，先举个例子:divclass=parenttext/div//css样式使文本元素垂直水平居中div.parent{width:px;height:px;vertical-align:middle;line-height:px;}2.通过绝对定位元素来使元素进行垂直水平居中，缺点就是子元素必须设置固定的宽度高度值且会以最近的一个设置posiiton为relative的父元素进行定位，如果没有这样的父元素，就以body文档为定位:divclass=parentdivclass=childdemo/div/div//css样式div.parent{position:relative;width:px;height:px;}div.child{position:absolute;width:px;height:px;margin:auto;left:0;top:0;bottom:0;right:0;}3.通过table-cell方法进行定位居中，父元素设置宽高度即可：divclass=parentdivclass=childdemo/div/div//css样式div.parent{display:table;}div.child{display:table-cell;text-aglin:center;vertical-align:middle;}4.通过CSS3的弹性盒子模型flex进行布局定位:divclass=parentdivclass=childdemo/div/div//css样式div.parent{width:%;height:px;display:flex;justify-content:center;align-items:center;}//或者直接设置子元素div.parent{width:%;height:px;display:flex;justify-content:center;}div.child{align-self:center;}5.通过flex的旧版本进行水平垂直居中对齐(其中box-orient类似于新版的flex-direction)：divclass=parentdivclass=childdemo/div/div//css样式div.parent{width:%;height:px;display:box;box-align:center;box-pack:center;}6.通过绝对定位absolute加margin负值进行居中对齐:divclass=parentdivclass=childdemo/div/div//css样式div.parent{width:px;height:px;position:relative;}div.child{position:absolute;top:50%;left:50%;right:auto;bottom:auto;width:50px;height:50px;margin-left:-25px;margin-top:-25px;}7.通过CSS3的transform属性的位移值translate来进行水平垂直居中:divclass=parentdivclass=childdemo/div/div//css样式div.parent{width:px;height:px;position:relative;}div.child{position:absolute;top:50%;left:50%;right:auto;bottom:auto;width:50px;height:50px;transform:translate(-50%,-50%);}8.利用上层元素的浮动来进行垂直居中:divclass=content/divdivclass=nextdemo/div//css样式div.content{height:50%;float:left；margin-bottom:-px;}div.next{clear:both;height:px;position:relative;}如果你也有前端方面的困惑或者需要指导的，欢迎
转载请注明：http://www.aierlanlan.com/rzdk/7488.html
