博客
关于我
前端笔记(总结几种水平垂直居中的方式)
阅读量:462 次
发布时间:2019-03-06

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

基本是网上看来的,前2种用的较多,第三种是有点黑科技的写法

如果只是水平居中,就可以直接使用margin:0 auto;

 

第一种:使用translate

属于transform的一个方法,将div进行百分比xy轴位移

.d1_1{    width: 200px;    height: 200px;    background-color: red;}.d2_1{    width: 100px;    height: 100px;    background: blue;    transform: translate(50%,50%);/*位移*/}

当然,最好使用相对定位加绝对定位先,为了不影响其他元素排列

 

第二种:使用弹性布局flex

大多数用这种方式,设置容器的属性即可,不过要注意浏览器兼容

.d3{    width: 200px;    height: 200px;    background-color: red;    display: flex;    align-items: center;/*垂直居中*/    justify-content: center;/*水平居中*/}.d4{    width: 100px;    height: 100px;    background: blue;}

 

第三种:这种是黑科技,使用vertical-align

不建议多用也比较麻烦,用到了水平居中、变为行内元素,居中

.d5{    width: 200px;    height: 200px;    background-color: red;    text-align: center;}.d5::after{    content: '';    display: inline-block;    height: 100%;    vertical-align: middle;}.d6{    width: 100px;    height: 100px;    background-color: blue;    display: inline-block;    vertical-align: middle;}

 

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

你可能感兴趣的文章
mysqldump备份时忽略某些表
查看>>
mysqldump实现数据备份及灾难恢复
查看>>
mysqldump数据库备份无法进行操作只能查询 --single-transaction
查看>>
mysqldump的一些用法
查看>>
mysqli
查看>>
MySQLIntegrityConstraintViolationException异常处理
查看>>
mysqlreport分析工具详解
查看>>
MySQLSyntaxErrorException: Unknown error 1146和SQLSyntaxErrorException: Unknown error 1146
查看>>
Mysql_Postgresql中_geometry数据操作_st_astext_GeomFromEWKT函数_在java中转换geometry的16进制数据---PostgreSQL工作笔记007
查看>>
mysql_real_connect 参数注意
查看>>
mysql_secure_installation初始化数据库报Access denied
查看>>
MySQL_西安11月销售昨日未上架的产品_20161212
查看>>
Mysql——深入浅出InnoDB底层原理
查看>>
MySQL“被动”性能优化汇总
查看>>
MySQL、HBase 和 Elasticsearch:特点与区别详解
查看>>
MySQL、Redis高频面试题汇总
查看>>
MYSQL、SQL Server、Oracle数据库排序空值null问题及其解决办法
查看>>
mysql一个字段为空时使用另一个字段排序
查看>>
MySQL一个表A中多个字段关联了表B的ID,如何关联查询?
查看>>
MYSQL一直显示正在启动
查看>>