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. 用 cctld工具创建带有国家代码的IP地址表

    用 cctld工具创建带有国家代码的IP地址表 cctld tools is creating IP addresses table with Country Code 项目地址 https://gi ...

  2. Android学习笔记进阶十三获得本地全部照片

    这是Intent的一个用法. 在ActivityAction里面有一个“ACTION_GET_CONTENT”字符串常量,该常量让用户选择特定类型的数据. intent.setType("i ...

  3. Filebeat-1.3.1安装和设置（图文详解）（多节点的ELK集群安装在一个节点就好）（以Console Output为例）

    前期博客 Filebeat的下载(图文讲解) 前提 Elasticsearch-2.4.3的下载(图文详解) Elasticsearch-2.4.3的单节点安装(多种方式图文详解) Elasticse ...

  4. Elasticsearch之es学习工作中遇到的坑（陆续更新）

    1:es集群脑裂问题(不要用外网ip,节点角色不要混用) 原因1:阿里云服务器,外网有时候不稳定. 解决方案:单独采购服务器,内网安装 原因2:master和node节点没有分开 解决方案: 分角色: ...

  5. C#之使用app.config可记录数据，下次打开可读取记录的数据

    一.背景 如下图所示,我通过open..按键打开了某个文件,之后我再把app给关闭掉,当再次打开app的时候,在textBox.Text上显示上一次打开的文件路径.通过使用app.config可以保存 ...

  6. 洛谷 P1208 [USACO1.3]混合牛奶 Mixing Milk

    P1208 [USACO1.3]混合牛奶 Mixing Milk 题目描述 由于乳制品产业利润很低,所以降低原材料(牛奶)价格就变得十分重要.帮助Marry乳业找到最优的牛奶采购方案. Marry乳业 ...

  7. Light OJ 1373 Strongly Connected Chemicals 二分匹配最大独立集

    m种阳离子 n种阴离子 然后一个m*n的矩阵 第i行第j列为1代表第i种阴离子和第j种阴离子相互吸引 0表示排斥 求在阳离子和阴离子都至少有一种的情况下 最多存在多少种离子能够共存 阴阳离子都至少须要 ...

  8. 用电脑从Google Play下载apk

    用电脑从Google Play下载apk 方法一:给Chrome浏览器安装apk-downloader插件,需禁止 SSL 错误警告,即在Chrome的快捷方式上加入"--ignore-ce ...

  9. ORACLE11g R2【RAC+ASM→单实例FS】

    ORACLE11g R2[RAC+ASM→单实例FS] 11g R2 RAC+ASMà单实例FS的DG,建议禁用OMF. 本演示案例所用环境:   primary standby OS Hostnam ...

  10. webpack4 多页面，多环境配置，逐行解释

    项目需求制作为新的app的分享页,故需要制作多页面应用,那既然app是新的,这边我们也要更新上,经过多方考察(度娘)下,综合了一些他人的优点并结合项目实况产生了此文. 本文为了解释详细,篇幅可能会较长 ...