博客
关于我
前端笔记(总结几种水平垂直居中的方式)
阅读量: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/

你可能感兴趣的文章
mysql的下载安装
查看>>
Mysql的两种存储引擎详细分析及区别(全)
查看>>
mysql的临时表简介
查看>>
MySQL的主从复制云栖社区_mysql 主从复制配置
查看>>
MySQL的事务隔离级别实战
查看>>
mysql的优化策略有哪些
查看>>
MySQL的使用
查看>>
mysql的全文检索的方法
查看>>
MySQL的函数
查看>>
mysql的函数DATE_ADD()
查看>>
mysql的函数操作
查看>>
mysql的分类排名_mysql高低排名
查看>>
Mysql的分表设计方法 (水平分表和垂直分表)
查看>>
mysql的分页查询limit关键字
查看>>
MySql的创建数据表、约束、外键约束的创建修改删除、级联操作
查看>>
MySQL的删除修改的实验目的_基础篇 - 数据库及表的修改和删除
查看>>
MySQL的四大隔离级别,你都知道哪些?
查看>>
MySQL的四种事务隔离级别
查看>>
MySQL的基本命令
查看>>
Mysql的备份与恢复类型
查看>>