css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）
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定位属性）的更多相关文章
- css 元素水平垂直方向居中
html部分 <div class="parent"> <div class="child"> - -居中- - </div> ...
- 小div在大div里面水平垂直都居中的实现方法
关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...
- 如何将一个div盒子水平垂直都居中？
html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...
- 如何让图片相对于上层DIV始终保持水平、垂直都居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使图片相对于上层DIV始终水平、垂直都居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS 各类 块级元素 行级元素 水平 垂直 居中问题
元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...
- CSS实现水平垂直同时居中的5种思路
× 目录 [1]水平对齐+行高 [2]水平+垂直对齐 [3]margin+垂直对齐[4]absolute[5]flex 前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的5种思路 ...
- CSS实现水平垂直同时居中的6种思路
前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的6种思路 水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂直居中 <style ...
- div实现水平和垂直都居中的三个超实用的方法
本文仅仅介绍作者认为的三种不错的方式, 方式一:transform: translate(-50%,-50%) 示例代码如下: .div{ position: absolute; top: 50%; ...
随机推荐
- [NOI.AC#41]最短路 线性基
链接 题解 如果不加边,两个点之间的长度是唯一的(只能走最短路径),因为如果重复走,就异或掉了. 因此,先DFS预处理一下每个点到根的距离 \(d[x]\) ,那么 \(x,y\) 之间的距离为 $d ...
- golang filepath.Glob
package main import ( "fmt" "path/filepath" ) func main() { //找出/home/ 目录下的所有的lo ...
- 【2017中国大学生程序设计竞赛 - 网络选拔赛】A Secret
[链接]http://acm.hdu.edu.cn/showproblem.php?pid=6153 [题意] ,S2中出现的次数与其长度的乘积之和. [题解] 扩展KMP的模板题. 首先,把S2和 ...
- 背景剪除和OpenCV中的实现
转载请注明出处! ! ! http://blog.csdn.net/zhonghuan1992 背景剪除和OpenCV中的实现 背景与前景都是相对的概念.以快速公路为例:有时我们对快速公路上来来往往的 ...
- [JWT] JWT with HS256
The advantages of JWT over traditional session based validation is: it effectively removing all auth ...
- 105.UDP通信实现广播
客户端 #include <stdio.h> #include <string.h> #include <winsock.h> #pragma comment(li ...
- 使用solr的DIHandler 构建mysql大表全量索引，内存溢出问题的解决方法
solr官方给出的解决方式是: DataImportHandler is designed to stream row one-by-one. It passes a fetch size value ...
- 微信支付v2开发(11) Native支付
关键字:微信公众平台 微信支付 Native原生支付 作者:方倍工作室 原文:http://www.cnblogs.com/txw1958/p/wxpay-native.html 在这篇微信公众平台开 ...
- ES5比较Jquery中的each与map 方法？
1.each es5: var arr = [1, 5, 7, 8, 9];var arr1 = []; arr.forEach(function (v, i) { arr1.push(v * 4) ...
- Node.js笔记 http fs
const http=require('http'); const fs=require('fs'); var server = http.createServer(function(req, res ...