css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）

一、总结

一句话总结：元素定位要用css定位属性，而且一般脱离文档流更加好操作。先设置为绝对定位，上左都50%，然后margin上左负自己宽高的50%。

1、如何让页面元素水平垂直都居中？

先设置为绝对定位，上左都50%，然后margin上左负自己宽高的50%。

16             position: absolute;

17             left:50%;

18             top:50%;

19             margin-top:-150px;

20             margin-left:-250px;

2、所有的定位都可以设置为绝对定位么？

所有的定位设置为绝对定位，脱离文档流，然后该怎么方便怎么设置

16             position: absolute;

17             left:50%;

18             top:50%;

19             margin-top:-150px;

20             margin-left:-250px;

3、绝对定位如何设置距浏览器上左的距离？、

left和top属性，因为这是定位的属性

17             left:50%;

18             top:50%;

4、在设置了left和top之后，如何再设置自己的偏移？

用margin属性，margin-left和margin-top

19             margin-top:-150px;

20             margin-left:-250px;

二、如何让页面元素水平垂直都居中

1、相关知识

定位:
1.position:absolute;
2.position:relative;

绝对定位和相对定位:
1.相同点
1)脱离文档流，都在文档流的上方

2.不同点
1)绝对的坐标系在浏览器的左上角，相对的坐标系在自己的左上角
2)绝对不占位，相对占位

2、代码

两个div块全部居中

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             margin:0px;

         }

         .div1{

             width:500px;

             height:300px;

             background: #f00;

             position: absolute;

             left:50%;

             top:50%;

             margin-top:-150px;

             margin-left:-250px;

         }        

         .div2{

             width:200px;

             height:100px;

             background: #0f0;

             position: absolute;

             top:50%;

             left:50%;

             margin-left:-100px;

             margin-top:-50px;

         }

     </style>

 </head>

 <body>

     <div class="div1">

         <div class="div2"></div>

     </div>

 </body>

 </html>
 

css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）的更多相关文章

  1. css 元素水平垂直方向居中

    html部分 <div class="parent"> <div class="child"> - -居中- - </div> ...

  2. 小div在大div里面水平垂直都居中的实现方法

    关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...

  3. 如何将一个div盒子水平垂直都居中？

    html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...

  4. 如何让图片相对于上层DIV始终保持水平、垂直都居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 使图片相对于上层DIV始终水平、垂直都居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. CSS 各类 块级元素 行级元素 水平 垂直 居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...

  7. CSS实现水平垂直同时居中的5种思路

    × 目录 [1]水平对齐+行高 [2]水平+垂直对齐 [3]margin+垂直对齐[4]absolute[5]flex 前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的5种思路 ...

  8. CSS实现水平垂直同时居中的6种思路

    前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的6种思路 水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂直居中 <style ...

  9. div实现水平和垂直都居中的三个超实用的方法

    本文仅仅介绍作者认为的三种不错的方式, 方式一:transform: translate(-50%,-50%)  示例代码如下: .div{ position: absolute; top: 50%; ...

随机推荐

  1. 教你win7解除阻止程序运行怎么操作

    教你win7解除阻止程序运行怎么操作 来源:http://www.windows7en.com/jiaocheng/27594.html 有时候我下载的软件,被win7系统禁止了运行了时软件不能使用, ...

  2. Eclipse-ERROR

    [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.3:compile (default-c ...

  3. JSON.parse和eval()的区别

    eval方法不检查给的字符串是否符合json的格式,parse会检查json语法格式. 比如一个json字符串data: { "a": 1, "b": &quo ...

  4. Unity新版网络-NetworkManager

    NetworkManager是一个组件,用来管理网络多人游戏的状态.它实际上是完全使用HLAPI实现,所以它所做的一切程序员可以使用其他方式实现.然而,NetworkManager封装好了很多有用的功 ...

  5. [Javascirpt AST] Babel Plugin -- create new CallExpression

    The code we want to trasform: 2 ** 3; a ** b; a **b * c; a ** b ** c; (a+1) ** (b+1); transform to: ...

  6. python2与python3的不同

    1.源码: python2的源码混乱.冗余.重复,非常不规范 python3的源码经过整合,优美.清晰.简单 2.编码: python2的默认编码是ASCII码,不能识别中文,需要在行首添加# -*- ...

  7. [Angular] Use Angular style sanitization to mark dynamic styles as trusted values

    Angular has a very robust security model. Dynamically inserted html, style or url values into the DO ...

  8. H5移动端IOS/Android兼容性总结，持续更新中…

    H5移动端IOS/Android兼容性总结,持续更新中… 1. IOS不识别日期 new Date("2018-07-01 08:00:00")在Android下正常显示可以直接进 ...

  9. HTTP网络协议(二)

    HTTP报文内的HTTP信息 HTTP协议交互的信息被称为HTTP报文,请求端的HTTP报文叫做请求报文,响应端的叫做响应报文.    HTTP为了提升传输速率,其在传输数据时,按照数据原样进行压缩传 ...

  10. Altium Designer如何统一改变pcb状态下的原件标号位置

    原创 我用的是Altium Designer16版本 变成 步骤如下: 选中标号 右击 下边一步很重要: 点击应用和确定 在之后弹出的对话框中选则你要改变的位置,我这里是把标号改变到原件的右侧: 等待 ...