Html5新增标签与样式及让元素水平垂直居中
|
1、利用table标签，自带的功能 <style> .parent{ border: 1px solid red; height: 500px } .child{ border: 1px solid black } </style> <body> <!-- --> <table class="parent"> <tr> <td class="child"> 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 </td> </tr> </table> </body> 效果 2、 margin-left: -50px; margin-top: -50px <style> .parent{ position: relative; background-color: yellow; width: 500px; height: 200px } .child{ width: 100px; height: 100px; background-color: #fff; position:absolute; top:50%; left: 50%; margin-left: -50px; margin-top: -50px } </style> 效果 3、 transform: translate(-50%,-50%) <style> .parent{ width: 500px; height: 300px; border: solid 1px red; position: relative; } .child{ width: 200px; height: 100px; border: 1px solid black; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) } </style> 效果 4、 margin: auto; <style> .p{ width: 300px; height: 200px; border: 1px solid red; position: relative; } .c{ width: 80px; height: 40px; background-color: #dedede; position:absolute; margin: auto; top:0; bottom:0; left: 0; right: 0 } </style> 效果 5、弹性盒 <style> .p{ border: 1px solid red; width: 400px; height: 500px; display: flex; justify-content: center; align-items: center } .c{ width: 100px; height: 100px; background-color: red; } </style> 效果 html5CSS3有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML和 HTML5？ HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，地理定位等功能的增加。 绘画 canvas 元素 - <!--[if lt IE 9]> <script> src=http://www.jb51.net/html5/"http:/html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> （编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
