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-时间更新

    今天发现电脑的时间不对,后来就自己摸索了时间的自动更新方法.自己记录下来,以方便以后忘了查询 点击电脑右下角的时间->选择更改日期和时间设置->选择internet->更改设置-&g ...

  2. scrollBarStyle- listview滑动条调整

    今天在解决问题的时候,需要设置listview滚动条,使listview的内容不能被滚动条覆盖 后来发现网上提到一个 ScrollView 属性.ScrollView中ScrollBar的style ...

  3. Wiz+360云盘，让你的知识库井井有条

    用了wiz快两年了,一些同事看到我在找资料时打开wiz,总会好奇的问这是什么,想到还有很多同仁在用文件夹管理知识库,于是想分享一下我的管理方法.(PS:鄙人愚见,如有高见,望指教) Wiz为知笔记下载 ...

  4. Spring异步执行(@Async)2点注意事项

    Spring中可以异步执行代码,注解方式是使用@Async注解. 原理.怎么使用,就不说了. 写2点自己遇到过的问题. 1.方法是公有的 // 通知归属人 @Async public void not ...

  5. 从头认识java-17.4 具体解释同步（3）-对象锁

    这一章节我们接着上一章节的问题,给出一个解决方式:对象锁. 1.什么是对象锁? 对象锁是指Java为临界区synchronized(Object)语句指定的对象进行加锁,对象锁是独占排他锁. 2.什么 ...

  6. Linux下守护进程精析

    什么是守护进程?     守护进程就是通常所说的Daemon进程,它是Linux中的后台服务程序. 它是一个生存期较长的进程,通常独立于终端而且周期性的运行某种须要的任务以及有时候会等待一些将会发生的 ...

  7. curl如何发起DELETE/PUT请求

    curl如何发起DELETE/PUT请求 DELETE: curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'DELETE'); PUT: curl_setopt($ch ...

  8. JQuery 当点击input后，单选多选的选中状态

    1.当点击input元素,此元素的选中checked的值 = 此元素此时表现的选中与否的状态. eg:input元素开始是未选中,点击后表现的是选中状态,此元素的checked为true(和此元素开始 ...

  9. 【干货】前端开发者最常用的六款IDE

    一.Visual Studio Code 下载地址:https://code.visualstudio.com/ 功能介绍: 微软在2015年4月30日Build 开发者大会上正式宣布了 Visual ...

  10. Java Web学习总结（13）——JSP入门

    一.什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写h ...