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. iOS动画之模拟音量振动条

    音量振动条 效果图: 假设实现? 创建3个layer.按顺序播放y轴缩放动画 利用CAReplicatorLayer实现 1.什么是CAReplicatorLayer? 一种能够复制自己子层的laye ...

  2. 洛谷P1143 进制转换

    题目描述 请你编一程序实现两种不同进制之间的数据转换. 输入输出格式 输入格式: 输入数据共有三行,第一行是一个正整数,表示需要转换的数的进制n(2≤n≤16),第二行是一个n进制数,若n>10 ...

  3. Vue前后端分离常用JS函数点（一）

    1.筛选过滤:array.filter(function(val){});  会把array中符合规则的数组元素按array里面的元素顺序保留下来. // 官方解释:按返回true或者false,把不 ...

  4. BPX-tree

    写的匆忙 估计有BUG 修改后  会去掉这个 说明 /** * @author shuly * @date 2017/6/5. */ // hint 一日为叶,终身为叶, 最后还是要转换成 <链 ...

  5. what happens when changing the DOM via innerHTML

    what happens when changing the DOM via innerHTML

  6. Excel数据比对-批量数据比对

    1.导出现场的Excel收费规则2.有专门的代码写的测试收费规则的工具(开发自己开发的)3.在这个工具上选择,导出的收费规则Excel,点击导出按钮(导出按钮里面有计算每一列的计费结果4.Excel里 ...

  7. Android RGB颜色对比表

    一  RGB颜色对照表:        注:内容来自http://rgb.phpddt.com/   里面有在线颜色摄取器   #FFFFFF   #FFFFF0   #FFFFE0   #FFFF0 ...

  8. SafeSEH原理及绕过技术浅析

    SafeSEH原理及绕过技术浅析 作者:magictong 时间:2012年3月16日星期五 摘要:主要介绍SafeSEH的基本原理和SafeSEH的绕过技术,重点在原理介绍. 关键词:SafeSEH ...

  9. 2.JPA学习总结

    转自:https://shmilyaw-hotmail-com.iteye.com/blog/1969190 前言 最近在做一个项目的时候因为牵涉到要对数据库的操作,在最开始实现的时候采用了直接的JD ...

  10. JS学习笔记 - 封装getPosition函数、一串跟着鼠标的div

    function getPosition(ev) { var scrollTop = document.documentElement.scrollTop || document.body.scrol ...