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%; ...
随机推荐
- Maven和Ant的差别
近期做的项目中一直是在使用maven.可是要知道最早出来的构建工具是Ant,如今Ant依旧有好多人再用.于是自己就抽出来时间.学习了一下Ant的主要的使用.这样也能跟好的理解Maven提供的新特性. ...
- 29.局部和全局重载new delete
#include <iostream> #include <Windows.h> using namespace std; //全局内存管理,统计释放内存,分配内存 //重载全 ...
- 后台vb校验是否GUID
'校验是否GUID Private Function IsGUID(ByVal strGUID As String) As Boolean Dim regexTemp As System.Text.R ...
- eclipse创建maven
第一步: 第二步 第三步: 第四步: 第五步: 第六步: <?xml version="1.0" encoding="UTF-8"?> <we ...
- 【AIM Tech Round 4 (Div. 2) A】Diversity
[链接]http://codeforces.com/contest/844/problem/A [题意] 大水题 [题解] 看看不同的个数num是不是小于k,小于k,看看len-num够不够补的 [错 ...
- WEB安全实战（二）带你认识 XSS 攻击
前言 上一篇文章写了关于 WEB 安全方面的实战,主要是解决 SQL 盲注的安全漏洞.这篇文章本来是要写一篇关于怎样防治 XSS 攻击的,可是想来想去,还是决定先从理论上认识一下 XSS 吧.下一篇文 ...
- 【C语言】编写函数实现库函数atoi，把字符串转换成整形
//编写函数实现库函数atoi.把字符串转换成整形 #include <stdio.h> #include <string.h> int my_atoi(const char ...
- Flask项目之手机端租房网站的实战开发（十一）
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...
- django 简单会议室预约（1）
django 是python的一个web框架,为什么要用django,作者之前用过另一个框架flask,虽然flask比较简单很容易让人学,但是flask没有整体感,会让初学着茫然. 这里我们用dja ...
- JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式
练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...