CSS实现水平垂直同时居中的5种思路_html/css_WEB-ITnose

程序员文章站 2022-06-01 17:50:28

...

× 目录 [1]水平对齐+行高 [2]水平+垂直对齐 [3]margin+垂直对齐 [4]absolute [5]flex

前面的话

　　水平居中和垂直居中已经单独介绍过，本文将介绍水平垂直同时居中的5种思路

思路一: text-align + line-height实现单行文本水平垂直居中

测试文字

思路二: text-align + vertical-align

【1】在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素

　　[注意]若兼容IE7-浏览器，将结构改为

结构来实现table-cell的效果；用display:inline;zoom:1;来实现inline-block的效果

  测试文字

【2】若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align:middle

思路三: margin + vertical-align

　　要想在父元素中设置vertical-align，须设置为table-cell元素；要想让margin:0 auto实现水平居中的块元素内容撑开宽度，须设置为table元素。而table元素是可以嵌套在tabel-cell元素里面的，就像一个单元格里可以嵌套一个表格

　　[注意]若兼容IE7-浏览器，需将结构改为

结构

  测试文字

思路四: 使用absolute

【1】利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto

  测试文字

【2】利用绝对定位元素的偏移属性和translate()函数的自身偏移达到水平垂直居中的效果

　　[注意]IE9-浏览器不支持

  测试文字

【3】在子元素宽高已知的情况下，可以配合margin负值达到水平垂直居中效果

  测试文字

思路五: 使用flex

　　[注意]IE9-浏览器不支持

【1】在伸缩项目上使用margin:auto

  测试文字

【2】在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

  测试文字

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

专题推荐

独孤九贱-php全栈开发教程
全栈 170W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
玉女心经-web前端开发教程
入门 80W+

主讲：灭绝师太由浅入深、明快简洁，非常适合前端学习入门
天龙八部-实战开发教程
实战 120W+

主讲：西门大官人思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

认证0级讲师

发布技术文章

最新文章
热门排行

推荐视频教程

javascript初级视频教程

jquery 基础视频教程

视频教程分类

：公益在线php培训，帮助PHP学习者快速成长！

相关标签： CSS实现水平垂直同时居中的5种思路

上一篇： mysql中group by 语句的用法详细介绍

下一篇： MySql采用GROUP_CONCAT合并多条数据显示的方法_MySQL

CSS实现水平垂直同时居中的5种思路_html/css_WEB-ITnose

前面的话

思路一: text-align + line-height实现单行文本水平垂直居中

思路二: text-align + vertical-align

思路三: margin + vertical-align

思路四: 使用absolute

思路五: 使用flex

专题推荐

css如何将div实现全屏水平垂直居中_html/css_WEB-ITnose

html中的水平居中和垂直居中的问题。(固定高度与高度不定)_html/css_WEB-ITnose

CSS实现垂直居中的常用方法_html/css_WEB-ITnose

css实现的弹出窗口始终垂直水平居中效果_html/css_WEB-ITnose

CSS设置行内元素和块级元素的水平居中、垂直居中_html/css_WEB-ITnose