制作大型网站开发,第二季企业网站开发,90设计包图网,营业执照年报入口本文节选自我的博客#xff1a;实现水平垂直居中的十种方式 #x1f496; 作者简介#xff1a;大家好#xff0c;我是MilesChen#xff0c;偏前端的全栈开发者。#x1f4dd; CSDN主页#xff1a;爱吃糖的猫#x1f525;#x1f4e3; 我的博客#xff1a;爱吃糖的猫实现水平垂直居中的十种方式 作者简介大家好我是MilesChen偏前端的全栈开发者。 CSDN主页爱吃糖的猫 我的博客爱吃糖的猫 Github主页: MilesChen 支持我点赞收藏⭐️留言介绍The mixture of WEBDeepLearningIotanything
前言
实现水平垂直居中是一道经典的面试题如果你能侃侃而谈这十种实现水平垂直居中的方式一定会令面试官眼前一亮。按照实现方式的不同可粗略分为三类绝对定位实现的四种、flex实现的两种、其他四种。
绝对定位实现的四种
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title水平垂直居中/titlestyle/* 公共代码 */.father {border: 1px solid red;width: 300px;height: 300px;}.box {width: 100px;height: 100px; background: green; }/* 公共代码 *//* 方法一 absolute负margin 常用、兼容性好。缺点是要知道子元素的宽高 */.father {position: relative;}.box {position: absolute;;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;}/* 方法二 absolute margin auto 兼容性好。缺点是要知道子元素的宽高*//* .father {position: relative;}.box {position: absolute;;top: 0;left: 0;right: 0;bottom: 0;margin: auto;} *//* 方法三 absolute calc 兼容性依赖calc的兼容性缺点是要知道子元素的宽高*//* .father {position: relative;}.box {position: absolute;;top: calc(50% - 50px);left: calc(50% - 50px);} *//* 方法四 absolute transform 兼容性依赖translate2d的兼容性不需要知道子元素的宽高 *//* .father {position: relative;}.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} *//style
/head
bodydiv classfatherdiv classboxcontent/div/div
/body
/htmlflex实现的两种
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title水平垂直居中/titlestyle/* 公共代码 */.father {border: 1px solid red;width: 300px;height: 300px;}.box {width: 100px;height: 100px; background: green; }/* 公共代码 *//* 方法5 flex 目前在移动端已经完全可以使用flex了PC端需要看自己业务的兼容性情况 */.father {display: flex;justify-content: center;align-items: center;}/* 方法6 flex 的另外一种写法*//* .father {display: flex;}.box {margin: auto;} *//style
/head
bodydiv classfatherdiv classboxcontent/div/div
/body
/html
其他四种
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title水平垂直居中/titlestyle/* 公共代码 */.father {border: 1px solid red;width: 300px;height: 300px;}.box {width: 100px;height: 100px; background: green; }/* 公共代码 *//* 方法7 行内块 将父元素设置text-align: centerline-height: 300px;;子标签display: inline-block;vertical-align: middle;line-height: initial;*//* 适用于行内块利用了行内块和行内标签具有文本属性的特点 *//* .father {line-height: 300px;text-align: center;}.box {font-size: 16px;display: inline-block;vertical-align: middle;line-height: initial;} *//* 方法8 grid 但兼容性不如flex不推荐使用 *//* .father {display: grid;}.box {align-self: center;justify-self: center;} *//* 方法9 css-table css新增的table属性可以让我们把普通元素变为table元素的现实效果通过这个特性也可以实现水平垂直居中*//* .father {display: table-cell;text-align: center;vertical-align: middle;}.box {display: inline-block;} *//style
/head
bodydiv classfatherdiv classboxcontent/div/div
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title水平垂直居中/titlestyle/* 公共代码 */.father {border: 1px solid red;width: 300px;height: 300px;}.box {width: 100px;height: 100px; background: green; }/* 公共代码 *//* 方法10 table 天然支持垂直居中设置水平居中即可缺点是 复杂table本身就不适合做居中布局的*//style
/head
bodytable classfathertr aligncentertddiv classboxcontent/div/td/tr/table
/body
/html总结
绝对定位的四种前三种要知道子元素的宽高
absolute负margin 常用、兼容性好。top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;absolute margin auto兼容性好。top: 0;left: 0;right: 0;bottom: 0;margin: auto;absolute calc兼容性依赖calc的兼容性top: calc(50% - 50px);left: calc(50% - 50px);absolute transform 兼容性依赖translate2dtop: 50%;left: 50%;transform: translate(-50%, -50%);
flex两种目前在移动端已经完全兼容flexPC端需要看业务的兼容性情况
父元素设置display: flex;justify-content: center;align-items: center;即可父元素设置display: flex;子元素margin: auto;
其他四种写法
行内块将父元素设置text-align: centerline-height: 300px(撑满);子标签display: inline-block;vertical-align: middle;line-height: initial; 控制好行高利用了行内块和行内标签具有文本属性的特点grid 但兼容性不如flex子标签align-self: center;justify-self: center;css-table css新增的table属性可以让我们把普通元素变为table元素的现实效果通过这个特性也可以实现水平垂直居中display: table-cell; text-align: center;vertical-align: middle;table标签table天然支持垂直居中设置水平居中即可缺点是 复杂table本身就不适合做居中布局的 感谢小伙伴们的耐心观看本文为笔者个人学习记录如有谬误还请告知万分感谢如果本文对你有所帮助还请点个关注点个赞~您的支持是笔者不断更新的动力
