1、定位核心代码实现请看示例代码中的注释:<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> < ...
1、定位
核心代码实现请看示例代码中的注释:
<!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>
原标题:CSS实现水平垂直居中方式
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。