css中三种绝对定位元素的水平垂直居中的方法

1.css实现居中

缺点:需要提前知道元素的宽度和高度。

<!doctype html>

<htmllang="en">

<head>

    <metacharset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 600px;

            height: 400px;

            position: absolute;

            left: 50%; top: 50%;

            border:1px solid #000;

            background:red;

            margin-top: -200px;    /* 高度的一半 */

            margin-left: -300px;    /* 宽度的一半 */

        }

    </style>

</head>

<body>

    <divclass="box">

    </div>

</body>

</html>

2、css3实现水平垂直居中

注意:无论元素的尺寸是多少,都可以居中。不过IE8以上才兼容这种写法,移动端可忽略。

<!doctype html>

<htmllang="en">

<head>

    <metacharset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 600px;

            height: 400px;

            position: absolute;

            left: 50%;

            top: 50%;

            border:1px solid #000;

            background:red;

            transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */

        }

    </style>

</head>

<body>

    <divclass="box">

    </div>

</body>

</html>

3、margin:auto实现居中

<!doctype html>

<htmllang="en">

<head>

    <metacharset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 600px;

            height: 400px;

            position: absolute;

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            border:1px solid #000;

            background:red;

            margin: auto;    /* 有了这个就自动居中了 */

        }

    </style>

</head>

<body>

    <divclass="box">

    </div>

</body>

</html>

时间: 2024-10-26 05:02:48

css中三种绝对定位元素的水平垂直居中的方法的相关文章

详细介绍CSS的三种selector

css|select CSS的三种selector 上一节开始我们讨论 CSS (Cascading Style Sheet) 的基础. 告诉你有三种 Selector. 但只介绍了其中的 HTML selector. 这一节我们把三种都详细介绍给你HTML selector.class selector.ID selector: HTML selector HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS 定义了它们, 在整页中, 这

导入CSS的三种方式

导入CSS的三种方式: 1.内部样式 <style type="text/css"> </style> 2.外部样式 <link rel="stylesheet" type="text/css" href="/test.css"> 3.内联样式 <div style="color:red;"></div>

Android 中三种启用线程的方法总结

在多线程编程这块,我们经常要使用Handler(处理),Thread(线程)和Runnable这三个类,那么他们之间的关系你是否弄清楚了呢? 首先说明Android的CPU分配的最小单元是线程,Handler一般是在某个线程里创建的,因而Handler和Thread就是相互绑定的,一一对应. 而Runnable是一个接口,Thread是Runnable的子类.所以说,他俩都算一个进程. HandlerThread顾名思义就是可以处理消息循环的线程,他是一个拥有Looper的线程,可以处理消息循环

三种类型的DNS攻击以及应对方法

本文讲的是 :   三种类型的DNS攻击以及应对方法 ,   [IT168 方案] DNS服务器能够将IP地址翻译成域名,这就是为什么你可以在浏览器输入cnw.com.cn来访问我们的网站,而不需要记住IP地址. 当DNS被攻击时,可能发生各种情况,不过,攻击者经常使用两种方法来利用被攻击的DNS服务器.首先,攻击者可以做的第一件事情是重定向所有入站流量到他们选择的服务器.这使他们能够发动更多的攻击,或者收集包含敏感信息的流量日志. 攻击者可以做的第二件事情是捕捉所有入站电子邮件.更重要的是,第

三种asp.net页面跳转的方法_实用技巧

第一种方法:response.redirect这个跳转页面的方法跳转的速度不快,因为它要走2个来回(2次postback),但它可以跳转到任何页面,没有站点页面限制(即可以由雅虎跳到新浪),同时不能跳过登录保护.但速度慢是其最大缺陷!redirect跳转机制:首先是发送一个http请求到客户端,通知需要跳转到新页面,然后客户端在发送跳转请求到服务器端.需要注意的是跳转后内部空间保存的所有数据信息将会丢失,所以需要用到session.代码如下  using System; using System

总结三种ASP.Net中上传文件的方法

ASP.Net的WebForm开发模式中,封装了FileUpload控件,可以方便的进行文件上传操作.但有时,你可能不希望使用ASP.Net中的服务器控件,仅仅使用Input标签来实现文件上传.当然也是可以的.下面总结在项目中使用过的上传文件的方式. 本文我们总结了三种ASP.Net中上传文件的方法. 一.使用Asp.Net中的FileUpload服务器端控件实现上传 使用asp.net中的服务器端控件FileUpload上传文件非常方便.FileUpload对上传操作进行了封装,你只需要调用S

JavaScript动态加载CSS的三种方法

css|javascript|动态|加载 如果你有很多关联的CSS文件要一起加载,或者想动态的加载不同的CSS文件,那么下面的方法你一定对你有帮助. 第一种:一般用在外部CSS文件中加载必须的文件 程序代码@import url(style.css);/*只能用在CSS文件中或者style标签中*/ 第二种:简单的在页面中加载一个外部CSS文件  程序代码document.createStyleSheet(cssFile); 第三种:用createElement方法创建CSS的Link标签  程

Java中三种简单注解介绍和代码实例_java

简单Java注解 JDK5提供的简单注解类型只有3个. 这三个都是用来预防错误或者进行提醒的,分别是: 1.Override 2.Deprecated 3.Suppresswarnings 需要注意,JDK5(另一个说法,Tiger)实际上并没有许多内置注解;相反,它允许核心Java支持注解特性的能力. JSR-175中严格规定它用来定义元数据功能. 需要由程序员编写自定义的注解类型,其他JSR标准也编写了一系列标准注解类型. 下面将用实例来深入讲解这三个简单注解. Override 注解 Ov

css实现未知尺寸元素水平垂直居中的方法

1.table表格 <table><tbody> <tr> <td>水平垂直居中的随意内容</td> <td>水平垂直居中的随意内容</td>-类似这样的, 垂直居中对其来说,也是非常简单的事.table cells 的 vertical-align:middle 就可以直接解决.所以实现起也来只要这样一行代码: td{ vertical-align:middle; } 2.display:table-cell实现  代码