网页中常常需用让绝对定位元素水平垂直居中，下面介绍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. ASP.NET 登录验证 ihttpmoudle

    问题: 1.iis版本不同(IIS7.0,应用程序池采用的是集成模式,换成经典模式才起作用.) 在 IIS 7 以下的版本中,应用以下配置: <system.web> <httpMo ...

  2. PHP使用UTF8编码读取ACCESS的乱码问题解决方案(转)

    PHP使用UTF8编码读取ACCESS的乱码问题解决方案 http://it.xwstudy.com/readnews.php?id=627 来源:本站编辑 发布日期:2013-05-27 已有 17 ...

  3. js实现右击

    <!DOCTYPE html> <html>     <head>  <meta charset="UTF-8">  <tit ...

  4. openstack（Pike 版）集群部署（五）--- Neutron 部署

    一.介绍 参照官网部署:https://docs.openstack.org/neutron/pike/install/install-rdo.html    继续上一博客进行部署:http://ww ...

  5. c++:空构造空析构的益处之一

    项目开发过程中发现一个问题,有段代码,一个动态库的cpp代码里不包含头文件中类的空构造空析构实现,就会出现编译出的动态库依赖项少了很多.而添加后则多了好几个依赖项.下面看例子: ##a.h class ...

  6. ffmpeg编码中的二阻塞一延迟

    1. avformat_find_stream_info接口延迟 不论是减少预读的数据量,还是设置flag不写缓存,我这边都不实用,前者有风险,后者会丢帧,可能我还没找到好姿势,记录在此,参考:htt ...

  7. Hdu1805-Expression(表达式树模版题+层序遍历树+栈的基本应用)

    2018-11-23-02:27:37 原题链接 题目描述: 题目一目了然. 本题思路: 本题很容易能想到是构建表达式树然后按照层序逆序输出即可. AC代码: #include <cstdio& ...

  8. Java-分治算法

    一.分治算法的原理 分治算法就是将一个规模为N的问题分解成K个规模较小的子问题,这些子问题相互独立且与原问题性质相同,求出子问题的解,就可以得出原问题的解 二.分治算法的伪代码实现 合并算法Merge ...

  9. ubuntu系列-安装jdk以及eclipse(for C++)

    1.安装jdk eclipse是使用java语言开发的,一个java应用程序的运行要在java虚拟机下.在没有安装jdk的前提下,即使在ubuntu上安装了eclipse也不能使用. (1)首先在官网 ...

  10. bbs项目引入富文本编辑器和处理xss攻击和文章预览

    一.富文本编辑上传文章和图片 富文本编辑器我们使用kindeditor,我们首先去官网下载,然后解压,放到我们的static的目录中 然后我们在html中这样使用富文本编辑器 <!DOCTYPE ...