多种方式垂直水平居中
2016-09-08 19:47
393 查看
1. 不需要知道父容器和子容器的具体尺寸
(1)方法一:margin
(2)方法二:绝对定位 + transform, 应用到了css3知识,需要注意兼容性问题
(3)flex弹性盒子,应用到了css3知识,需要注意兼容性问题
2.已知宽高尺寸
3.文字水平垂直居中
(1)单行文字
水平居中在父级元素添加text-align: center;
垂直居中在父级元素添加和父级元素高度一样的line-height
(2)多行文字
水平居中在父级元素添加text-align: center;
垂直居中在父级元素添加一定的行高和padding设置为xx 0;
(1)方法一:margin
<div class="wrapper"> <div class="content"></div> </div>
.wrapper { display: table-cell; width: 500px; height: 500px; text-align: center; /*水平居中*/ border: 1px solid #eee; vertical-align: middle; /*图片垂直居中*/ position: relative; } .content { width: 200px; height: 200px; background-color: red; margin: auto; }
(2)方法二:绝对定位 + transform, 应用到了css3知识,需要注意兼容性问题
<div class="wrapper"> <div class="content"></div> </div>
.wrapper { display: block; width: 500px; height: 500px; border: 1px solid #eee; position: relative; } .content { width: 200px; height: 200px; background-color: red; position: absolute; left: 50%; right: 50%; transform: translate(-50%, -50%); }
(3)flex弹性盒子,应用到了css3知识,需要注意兼容性问题
<div class="wrapper"> <div class="content"></div> </div>
.wrapper { width: 500px; height: 500px; border: 1px solid #eee; display:flex; justify-content:center;// 主轴(一般为横轴)的排列方式 align-items: center; // 纵轴(一般为竖轴)的排列方式 } .content { width: 200px; height: 200px; background-color: red; }
2.已知宽高尺寸
<div class="wrapper"> <div class="content"></div> </div>
.wrapper { width: 500px; height: 500px; border: 1px solid #eee; position: relative; } .content { width: 200px; height: 200px; background-color: red; position: absolute; left: 50%; top: 50%; /*自身宽高一半的负值*/ margin-left: -100px; margin-top: -100px; }
3.文字水平垂直居中
(1)单行文字
水平居中在父级元素添加text-align: center;
垂直居中在父级元素添加和父级元素高度一样的line-height
(2)多行文字
水平居中在父级元素添加text-align: center;
垂直居中在父级元素添加一定的行高和padding设置为xx 0;
相关文章推荐
- Java 求全排列的两种方式
- 关于memset的注意事项
- Java类与对象(一)
- linux查看日志常用命令
- Android----给Ta惊喜,带音乐的动态相册
- JAVA基础6.45——继承概述(1)
- linux系统性能监控常用命令
- POJ 2449 A*k短路
- 浅析MySQL中exists与in的使用
- Qt之QComboBox
- 【IOS学习】NSString copy or not (strong)?
- 创建HelloWorld项目
- 添加阴影
- [置顶] javascript自定义事件应用实例
- python实现字符串全排列(注:每个字符写在了列表里)
- Linux下配置 Keepalived(心跳检测部署)
- C和指针 第十三章 高级指针话题
- uva11456——Trainsorting(LIS)
- Linux下配置 Keepalived(心跳检测部署)
- 几种防止表单重复提交的方法