博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS实现水平垂直同时居中的6种思路
阅读量:5825 次
发布时间:2019-06-18

本文共 1241 字,大约阅读时间需要 4 分钟。

前面的话

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

 

水平对齐+行高

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

测试文字

 

水平+垂直对齐

【思路二】text-align + vertical-align

【1】在父元素设置和,并将父元素设置为元素,子元素设置为元素

  [注意]若兼容IE7-浏览器,将结构改为结构来实现table-cell的效果;用display:inline;;来实现inline-block的效果

测试文字

【2】若子元素是,可不使用table-cell,而是其父元素用替代高度,且设为0。子元素本身设置vertical-align:middle

test

 

margin+垂直对齐

【思路三】margin + vertical-align

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

  [注意]若兼容IE7-浏览器,需将结构改为<table>结构

测试文字

 

绝对定位

【思路四】使用absolute

【1】利用元素的,在为确定值的基础上,设置margin:auto

测试文字

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

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

测试文字

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

测试文字

 

flex

【思路五】使用flex

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

【1】在上使用margin:auto

测试文字

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

测试文字

 

grid

【思路六】使用grid

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

【1】在网格项目中设置justify-self、align-self或者margin:  auto

测试文字

【2】在网格容器上设置justify-items、align-items或justify-content、align-content

测试文字

 

转载地址:http://mqidx.baihongyu.com/

你可能感兴趣的文章
python例子
查看>>
环境变量(总结)
查看>>
ios之UILabel
查看>>
Java基础之String,StringBuilder,StringBuffer
查看>>
1月9日学习内容整理:爬虫基本原理
查看>>
安卓中数据库的搭建与使用
查看>>
AT3908 Two Integers
查看>>
渐变色文字
查看>>
C++ 0X 新特性实例(比较常用的) (转)
查看>>
node生成自定义命令(yargs/commander)
查看>>
各种非算法模板
查看>>
node-express项目的搭建并通过mongoose操作MongoDB实现增删改查分页排序(四)
查看>>
如何创建Servlet
查看>>
.NET 设计规范--.NET约定、惯用法与模式-2.框架设计基础
查看>>
win7 64位+Oracle 11g 64位下使用 PL/SQL Developer 的解决办法
查看>>
BZOJ1997:[HNOI2010]PLANAR——题解
查看>>
BZOJ1014:[JSOI2008]火星人prefix——题解
查看>>
使用Unity3D引擎开发赛车游戏
查看>>
HTML5新手入门指南
查看>>
opennebula 开发记录
查看>>