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. 编程精粹--编写高质量C语言代码（4）：为子系统设防（一）

    通常,子系统都要对事实上现细节进行隐藏,在进行细节隐藏的同一时候.子系统为用户提供了一些关键入口点. 程序猿通过调用这些关键的入口点来实现与子系统的通信.因此假设在程序中使用这种子系统而且在其调用点加 ...

  2. Android学习笔记进阶十二之裁截图片

    package xiaosi.cut; import java.io.File; import android.app.Activity; import android.content.Intent; ...

  3. 1.21 Python基础知识 - python常用模块-2

    一.xml 什么是 XML? XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML 的设计宗旨是传输数据,而非显示数据 X ...

  4. C# 中 int、Convert.ToInt32（）、int.Parse()的区别

    int适合简单数据类型之间的转换,C#的默认整型是int32(不支持bool型); int.Parse(string sParameter)是个构造函数,参数类型只支持string类型; Conver ...

  5. 使IIS服务器支持下载 apk/ipa 安装包

    默认情况下,使用IIS作为Web服务器的无法下载此文件,访问会触发404错误,服务器找不到对应资源. IIS服务器不能下载.apk文件的原因:iis的默认MIME类型中没有.apk文件,所以无法下载. ...

  6. django 简单会议室预约（6）

    后台完了现在来看前端,前端用了一个bootstrap框架,看起来能好看点 先看一下文件结构:在djapp里创建了两个文件夹templates和static templates里面是要显示的页面,sta ...

  7. WPF 入门《布局面板》

    常见的几个布局面板 1.StackPanel面板 StackPanel面板能够简单根据单行或者单列进行元素排列, StackPanel 默认的布局方向为垂直方向(Vertical), 由Orienta ...

  8. Redis .Net客户端源码

    1.简单介绍 当前NoSql使用已经极为普遍,无论是Java生态圈,还是.net生态圈.大大小小的Web站点在追求高性能高可靠性方面,不由自主都选择了NoSQL技术作为优先考虑的方面.主流的技术有:H ...

  9. 洛谷——P1823 音乐会的等待

    https://www.luogu.org/problem/show?pid=1823 题目描述 N个人正在排队进入一个音乐会.人们等得很无聊,于是他们开始转来转去,想在队伍里寻找自己的熟人.队列中任 ...

  10. 洛谷 P1610 鸿山洞的灯

    P1610 鸿山洞的灯 题目描述 已知n盏灯以及每盏灯的位置p[i],p[i]均不相等,两盏相邻的灯当小于dist时,若这个安全距离里面还有灯是亮着时,就可以关掉该盏灯,(即若第i-1盏与第i+1盏的 ...