css元素水平垂直居中
温习一下元素水平垂直居中的几种方法
元素有具体宽度
1、absolute+负边距
.LV_center{
border: 1px solid red;
position: absolute;
width: 100px;
height: 100px;
top:50%;
left: 50%;
margin-top:-原高度/2 ;
margin-left: -原高度/2
}
2、absolute+calc
.LV_center{
border: 1px solid red;
position: absolute;
width: 100px;
height: 100px;
top:calc(50% - 原高度/2);
left:calc(50% - 原高度/2);
}
3、absolute+margin auto
.LV_center{
border: 1px solid red;
position: absolute;
width: 100px;
height: 100px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
元素宽度不定
1、absolute+transform,css3特性2d平移
.LV_center{
border: 1px solid red;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
2、line-height,外层设置行高,内层继承行高
.box{
line-height: 300px;
}
.LV_center{
border: 1px solid red;
display: inline-block;
line-height: inherit;
vertical-align: middle;
}
3、table-cell,模拟td特性,让元素像表格里的td
.box{
border: 1px solid red;
width: 300px;
height: 300px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.LV_center{
border: 1px solid red;
display: inline-block;
}
4、flex弹性盒子
.LV_center{
border: 1px solid red;
display: flex;
justify-content: center; //主轴对齐方式
align-items: center; //位于主轴中心
}
推荐一位讲得更详细的 : https://www.jianshu.com/p/1b3337214941
最新文章
- dubbox升级spring到4.x及添加log4j2支持
- 推荐相关学习 &; 典型算法、典型特征、典型推荐系统框架
- 【python游戏编程之旅】第九篇---嗷大喵快跑小游戏开发实例
- 静态成员函数(面向对象的static关键字)
- CSS之利用text-indent隐藏文字用图片当Login
- jQuery回调、递延对象总结(一)jQuery.Callbacks详解
- PHP+jQuery 注册模块的改进之三:使用 Smarty3
- Bootstrap部分---环境安装及一个可视化的布局;
- HDU 5802 Windows 10 (贪心+dfs)
- jenkins 重新设置 管理员密码
- SSO(转)
- js中的apply call 操作小结(参考自网络)
- QT学习 之 文本文件读写
- HDU 1754 I Hate It (段树 &;amp; 树阵)
- ajax的分页查询(不刷新页面)
- HDU 2045 不容易系列之(3)—— LELE的RPG难题(递归/动态规划)
- 20161110-awk、sed测试题
- Google弃用HttpClient 而推荐使用HttpURLConnection的原因
- 平均精度均值(mAP)——目标检测模型性能统计量
- [Python]基于K-Nearest Neighbors[K-NN]算法的鸢尾花分类问题解决方案
热门文章
- Golang 需要避免踩的 50 个坑1
- Python3+HTMLTestRunner生成html测试报告时报错HTMLTestRunner.py line 687, in generateReport self.stream.write(output.encode('utf8'))
- 数据结构篇——平衡二叉树(AVL树)
- tf.variable_scope()和tf.name_scope()
- Kustomize安装配置入门文档
- 1. Ubuntu下使用pip方式安装tensorflow
- 第03节-BLE协议各层数据格式概述
- 如何用<;dl>;标签做表格而不用table标签
- JS中把其他类型转换成字符串的三种方法
- 出现 sudo: unable to resolve host XXX 信息解决办法