zoukankan      html  css  js  c++  java
  • Xhtml+css实践水平居中的设计方法

    有个疑惑已久的问题,前段时间做CSS+div布局时候,发现水平让一个元素居中十分容易margin:0 auto;然而要做到垂直居中却没有找到可行的方案,以下是新发现的解决方案,整理如下:

    Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <style>
    .center
    {width:200px; height:200px; top:50%; left:50%; position:absolute; margin:-100px 0 0 -100px; background:#FF0000}
    .div
    {width:200px; height:200px; top:50%; position:absolute; left:50%; background-color:#0099FF}
    </style>
    <body>
    <div class="center">我才是真正的水平且垂直据总</div>
    <div class="div">我只是做到了让左上角的顶点处于窗口的中心。</div>
    </body>
    </html>

    效果缩略图如下:

    注意红色方块的中心点是浏览器窗口的中心,或者说是body元素的中心位置。

    个人理解:

    在此,我说下我的个人理解,该正方DIV元素如果要真正居中的话,实际上要做到让它的中心点居中才可以,用margin:-100px 0 0 -100px;实现让元素左移100px,再上移100px,从而实现了真正的中心点居中,绿色方块是没有用margin:-100px 0 0 -100px;之前的效果,红色部分是偏移后的效果。如此是否可以总结一点:margin-left,margin-top取负值的时候可以实现某种意义上的相对定位呢?

  • 相关阅读:
    lxml webdriver 抓取街拍
    python 正则抓取古诗词
    2021 最新版 Spring Boot 速记教程
    hbase 命令查看表大小
    Spring AOP,应该不会有比这更详细的介绍了!
    SpringBoot实战:整合Redis、mybatis,封装RedisUtils工具类等
    API接口的安全设计验证:ticket,签名,时间戳
    5.控制台输出空心菱形
    4.灯泡开关问题
    EXCEL函数
  • 原文地址:https://www.cnblogs.com/shineqiujuan/p/1348338.html
Copyright © 2011-2022 走看看