CSS居中
来源:互联网 发布:flushcopy是什么软件 编辑:程序博客网 时间:2024/05/02 13:36
水平居中
1.margin: 0 auto
这个是用于子元素上的,前提是不受float影响
2. text-align : center ;
img的display:inline-block;(这一项就可以实现,或者与text-align配合),类似一样在不受float影响下进行
在父元素上添加效果让它进行水平居中
水平垂直居中
3.定位和需要定位的元素的margin减去宽高的一半
这种方法的局限性在于需要知道需要垂直居中的宽高才能实现,经常使用这种方法
4. 方法3定位和margin:auto
这个方法也很实用,不用受到宽高的限制,也很好用
5. 方法3绝对定位和transfrom
其实这个就是把其变成表格样式,再利用表格的样式来进行居中,很方便
6. 方法4 和 display : table-cell
<style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; background: #e9dfc7; border: 1px solid red; display: table-cell; vertical-align: middle; text-align: center; } img{ width: 100px; height: 150px; } </style>
7. 方法5 和flexBox居中
这个用了C3新特性flex,非常方便快捷,在移动端使用完美,pc端有兼容性问题,以后会成为主流的
<style> .box{ width: 300px; height: 300px; background:#e9dfc7; border:1px solid red; display: flex; justify-content: center; align-items:center; } img{ width: 150px; height: 100px; }</style>
8. 方法6 和 vertical-align:middle;
这个方法关键要有一个和容器一样高的元素作为居中的一个参照就像b元素一样
<style> .wrap{ width:300px; height:300px; background:rgba(0,0,0,0.5); text-align:center; font-size:0; } .vamb{ display:inline-block; width:0px; height:100%; vertical-align:middle; } .test{ display:inline-block; vertical-align:middle; font-size:16px; text-align:left; background:red; }</style><body> <div class="wrap"> <b class="vamb"></b> <div class="test"> 宽高不定<br> 垂直水平居中 </div> </div></body>
0 0
- CSS居中
- CSS居中
- css居中
- CSS居中
- css居中
- css 居中
- css 居中
- css居中
- [css] 居中
- css居中
- CSS居中
- css居中
- css居中
- CSS居中
- css居中
- CSS | 居中
- CSS居中
- CSS居中
- 0pencv 分类器 haartraining生成.xml文件过程
- LeetCode485.Max Consecutive Ones题解
- windows下部署免费ssl证书(letsencrypt)
- jvm中编码问题以及java操作文件中的编码问题
- mysql远程访问被拒绝问题
- CSS居中
- java集合框架(常用部分)
- string 和 int 之间的相互转化
- Winpcap学习总结(三)
- 简单算法解答
- [MFC] CMFCShellListCtrl初始化失败
- 栈(一)线性存储栈的c语言实现
- Android中的颜色设置
- PL SQL基础