HTML 水平居中 垂直居中 垂直水平居中的几种实现方式「建议收藏」

​

大家好，我是架构君，一个会写代码吟诗的架构师。今天说一说HTML 水平居中 垂直居中 垂直水平居中的几种实现方式「建议收藏」,希望能够帮助大家进步!!!

文章目录代码语言：txt复制- 水平居中

- 垂直居中垂直水平居中方式1：绝对定位方式二 定位+负margin方式3：使用translate实现平移方式4：通过设置bottom top left right margin来实现方式5：flex布局方式6：使用tablecell方式7：JS方式水平居中方法一：在父容器上定义固定宽度，margin值设成auto代码语言：javascript复制

只听到从架构师办公室传来架构君的声音:

相见无言还有恨，几回判却又思量，月窗香径梦悠飏。有谁来对上联或下联?

方法2：在子元素中将display设置为inline-block,父元素text-algin设置为center

代码语言：javascript复制此代码由Java架构师必看网-架构君整理

垂直居中代码语言：javascript复制

代码语言：javascript复制此代码由Java架构师必看网-架构君整理

垂直水平居中方式1：绝对定位代码语言：javascript复制

方式二 定位+负margin代码语言：javascript复制

方式3：使用translate实现平移代码语言：javascript复制 下面的transform代码可以更换为transform: translate(-50%,-50%);代码语言：javascript复制

效果如上图。

方式4：通过设置bottom top left right margin来实现代码语言：javascript复制

方式5：flex布局代码语言：javascript复制最长使用，设置 display: flex；justify-content: center;align-items: center;三个属性；代码语言：javascript复制

方式6：使用tablecell代码语言：javascript复制

方式7：JS方式代码语言：javascript复制