CSS设置居中
来源:互联网 发布:身份证恶搞制作软件 编辑:程序博客网 时间:2024/06/06 04:42
一.水平居中
1.inline
使用padding
2.block
(1)单个block
设置width,使用margin:0 auto;
(2)多个block
可使用flex
display:flex;
justify-content:center;
(关于flex语法http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
二.垂直居中
1.inline
(1)单行
使用padding、
或者设置line-height
(2)多行
容器设置display: table;
文字设置display: table-cell;
再设置vertical-align: middle;与父元素中间基线对其
2.block
(1)已知元素高度
设置position: absolute;
top: 50%;
再根据高度设置margin-top
(2)未知元素高度
设置将元素移到父元素中间
position: absolute;
top: 50%;
再往回移动元素长度的一半
transform: translateY(-50%);
(3)使用flex
容器设置
flex-direction: column;
justify-content: center;
元素设置
background: black;
三.水平垂直居中
1)已知元素尺寸
设置position: absolute;
top: 50%;
left:50%;
再根据尺寸设置margin
(2)未知元素尺寸
设置将元素移到父元素中间
position: absolute;
top: 50%;
left:50%;
再往回移动元素长度的一半
transform:translate(-50%,-50%);
(3)使用flex
容器设置
flex-direction: column;
justify-content: center;
align-items:center;
元素设置
background: black;
- CSS设置DIV居中
- CSS 背景图片 设置居中
- Css元素居中设置
- CSS设置DIV居中
- css图片设置居中
- CSS 水平居中设置
- CSS 垂直居中设置
- CSS样式--居中设置
- CSS设置居中
- css之居中设置
- css设置垂直居中
- CSS设置水平居中和垂直居中
- CSS设置水平居中、垂直居中
- css中table居中设置
- CSS设置DIV居中显示
- 设置css让div居中
- CSS设置居中的方法
- CSS样式设置--水平居中
- Sql C# 字符串发转
- HandlerThread 源码解析
- Hibernate 表关系 实体类 注解 大全
- PAT 乙级 1018.锤子剪刀布
- 关于位移运算符的理解和典型题目的讲解
- CSS设置居中
- Android Volley完全解析
- Java的一些基本知识点
- web项目部署到tomcat 遇到ClassNotFound问题
- chain.doFilter(request,respnse)
- 数据库的一些基本概念
- 【js】用DOM方式实现jQuery.ajax
- 协方差的意义和计算
- 字节输出流