CSS实现水平垂直居中方式
2017-09-15 00:00
891 查看
1、定位
核心代码实现请看示例代码中的注释:
效果:
2、table-cell布局
核心代码实现请看示例代码中的注释:
效果同上。
3、flex布局
核心代码实现请看示例代码中的注释:
效果同上,注意浏览器兼容性问题。
4、translate+relative定位
核心代码实现请看示例代码中的注释:
效果同上,注意浏览器兼容性问题。
核心代码实现请看示例代码中的注释:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>CSS水平垂直居中实现方式--定位实现</title> <style type="text/css"> *{ margin: 0; padding: 0; } .p{ /*父元素为除了static以外的定位方式*/ position: relative; /*position: absolute;*/ /*position: fixed;*/ width: 500px; height: 500px; border: 1px solid red; } .c{ /*子元素为绝对定位*/ position: absolute; width: 200px; height: 200px; /*top、bottom、left和right 均设置为0*/ top: 0; bottom: 0; left: 0; right: 0; /*margin设置为auto*/ margin:auto; border: 1px solid green; } </style> </head> <body> <div class="p"> <div class="c"> 子元素 </div> </div> </body> </html>
效果:
2、table-cell布局
核心代码实现请看示例代码中的注释:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>CSS水平垂直居中实现方式--定位实现</title> <style type="text/css"> *{ margin: 0; padding: 0; } .p{ width: 500px; height: 500px; border: 1px solid red; display: table-cell; /*vertical-align: middle; 实现垂直居中*/ vertical-align: middle; } .c{ width: 200px; height: 200px; border: 1px solid green; /*margin: 0 auto; 实现水平居中*/ margin: 0 auto; } </style> </head> <body> <div class="p"> <div class="c"> 子元素 </div> </div> </body> </html>
效果同上。
3、flex布局
核心代码实现请看示例代码中的注释:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>CSS水平垂直居中实现方式--定位实现</title> <style type="text/css"> * { margin: 0; padding: 0; } .p { width: 500px; height: 500px; border: 1px solid red; /*flex 布局*/ display: flex; /*实现垂直居中*/ align-items: center; /*实现水平居中*/ justify-content: center; } .c { width: 200px; height: 200px; border: 1px solid green; } </style> </head> <body> <div class="p"> <div class="c"> 子元素 </div> </div> </body> </html>
效果同上,注意浏览器兼容性问题。
4、translate+relative定位
核心代码实现请看示例代码中的注释:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>CSS水平垂直居中实现方式--定位实现</title> <style type="text/css"> * { margin: 0; padding: 0; } .p { width: 500px; height: 500px; border: 1px solid red; } .c { width: 200px; height: 200px; border: 1px solid green; /*relative 定位*/ position: relative; /*top和left偏移各为50%*/ top: 50%; left: 50%; /*translate(-50%,-50%) 偏移自身的宽和高的-50%*/ transform: translate(-50%, -50%); } </style> </head> <body> <div class="p"> <div class="c"> 子元素 </div> </div> </body> </html>
效果同上,注意浏览器兼容性问题。
相关文章推荐
- [分享] 纯CSS完美实现垂直水平居中的6种方式
- [分享] 纯CSS完美实现垂直水平居中的6种方式
- CSS实现水平垂直居中的1010种方式
- CSS实现垂直、水平居中方式
- css实现水平居中和垂直居中的常见方式
- html中div使用CSS实现水平/垂直居中的多种方式
- 纯CSS完美实现垂直水平居中的6种方式
- 纯CSS完美实现垂直水平居中的6种方式
- 纯CSS完美实现垂直水平居中的6种方式
- [分享] 纯CSS完美实现垂直水平居中的6种方式
- css实现文字水平方向垂直方向同时居中的方式
- CSS实现水平垂直居中方式
- CSS实现垂直居中的常用方法 在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现。但是垂直
- css实现图片水平垂直居中
- CSS实现文字和图片的水平垂直居中
- CSS 实现:元素相对于文档水平垂直居中
- [置顶] 七种css方式让容器垂直水平居中
- css实现元素水平垂直居中
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- CSS实现图片水平垂直居中于DIV