网页中常常需用让绝对定位元素水平垂直居中，下面介绍2种方法：

一 元素宽度未知

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style>

         .father {

             width: 800px;

             height: 400px;

             background-color: pink;

             margin: 100px auto;

             position: relative;

         }

         .son {

             width: 10%;

             height: 100px;

             background-color: purple;

             height: 50%;

             overflow: auto;

             margin: auto;

             position: absolute;

             top: 0; left: 0; bottom: 0; right: 0;

         }

     </style>

     <title>Document</title>

 </head>

 <body>

     <!-- 绝对定位 水平垂直居中 -->

      <div class="father">

         <div class="son"></div>

      </div>

 </body>

 </html>

 </html>

二 元素宽度已知

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style>

         .father {

             width: 800px;

             height: 400px;

             background-color: pink;

             margin: 100px auto;

             position: relative;

         }

         .son {

             width: 200px;

             height: 100px;

             background-color: purple;

             position: absolute;

             left: 50%;

             margin-left: -100px;

             top: 50%;

             margin-top: -50px;

         }

     </style>

     <title>Document</title>

 </head>

 <body>

     <!-- 绝对定位 水平垂直居中 -->

      <div class="father">

         <div class="son"></div>

      </div>

 </body>

 </html>

二 元素宽度已知

　　使用CSS3中的新特性transform变形来做，移动盒子的位置

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style>

         .father {

             width: 800px;

             height: 400px;

             background-color: pink;

             margin: 100px auto;

             position: relative;

         }

         .son {

              width: 20%;/*相对于父级的百分比*/

              height: 30%;

              background-color: purple;

              position: absolute;

              top: 50%;

              left: 50%;

              transform: translate(-50%, -50%);/*相对于自己的百分比*/

         }

     </style>

     <title>Document</title>

 </head>

 <body>

     <!-- 绝对定位 水平垂直居中 -->

      <div class="father">

         <div class="son"></div>

      </div>

 </body>

 </html>

 </html>

【Web】CSS实现绝对定位元素水平垂直居中的更多相关文章

  1. CSS布局：元素水平垂直居中

    CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...

  2. css 常用的绝对定位元素水平垂直居中的方法

    两种方法都能够实现: 1. div { height:80%; /*一定要设置高度*/ overflow:hidden;/*建议设置*/ margin: auto; position: absolut ...

  3. css布局------块元素水平垂直居中的四种方法

    HTML <div class="parent answer-1"> <div></div></div> CSS .parent { ...

  4. CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）

    本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...

  5. css进阶 04-如何让一个元素水平垂直居中？

    04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...

  6. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  7. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  8. css 实现元素水平垂直居中总结5中方法

    个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...

  9. CSS元素水平垂直居中的方法

    1.  元素水平居中 1.1  设置父元素的属性 text-align: center; 说明:此属性只针对父元素的子元素为内联元素时有效,比如:img,input,select,button等(行内 ...

随机推荐

  1. C#中与C++中的 LPWSTR(wchar_t *) 对应的类型

    1.设置 CharSet = CharSet.Unicode [DllImport("test.dll", EntryPoint = "sum()", Char ...

  2. 九：python 对象类型详解五：元组

    一:元组: 1,简单介绍:元组由简单的对象组构成.元组与列表非常类似,只不过元组不能在原处修改(它们)是不可变的,并且通常写成圆括号中的一系列项.虽然元组不支持任何方法调用,但元组具有列表的大多数属性 ...

  3. empty 与 remove 的区别

    empty()移除指定元素中的所有子节点,拿$("p").empty()来说,他只是把<p>dsfsd</p>中的文本给移除了,而留下 了<p> ...

  4. Docker学习之安装mysql

    1.从Docker检索mysql镜像 指令: docker search mysql 2.镜像下载 指令: docker pull mysql:5.7.19 3.查看本地镜像列表 指令: docker ...

  5. 153. Find Minimum in Rotated Sorted Array (Array; Divide-and-Conquer)

    Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...

  6. PHP序列及反序列化安全漏洞

      尽量阐述全PHP序列化的相关东西-.- 1.序列化和反序列化   序列化是将变量或对象转换成字符串的过程:反序列化是将字符串转换成变量或对象的过程.   序列化及反序列化常见函数:serializ ...

  7. HDU 4614 Vases and Flowers(二分+线段树区间查询修改)

    描述Alice is so popular that she can receive many flowers everyday. She has N vases numbered from 0 to ...

  8. Delphi: TLabel设置EllipsisPosition属性用...显示过长文本时，以Hint显示其全文本

    仍然是处理多语言中碰到问题. Delphi自2006版以后,TLabel有了EllipsisPosition属性,当长文本超过其大小时,显示以...,如下图: 这样虽然解决显示问题,但很显然,不知道. ...

  9. classLoader.getResourceAsStream中文乱码

    一直用一个方法安然无恙,今天在新项目中突然乱码了,原代码: ClassLoader classLoader = Thread.currentThread().getContextClassLoader ...

  10. python中logging模块使用

    1.logging模块使用场景 在写程序的时候,尤其是大型的程序,在程序中加入日志系统是必不可少的,它能记录很多的信息.刚刚接触python的时候肯定都在用print来输出信息,这样是最简单的输出,正 ...