关于页面布局中，如何让一个div水平和垂直居中的五个方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html,body{
height: 100%;
overflow: hidden;
}
#box{
border: 1px solid;
background-color: antiquewhite;
width: 150px;
height: 50px;
text-align: center;
line-height: 50px;
}
/* 第一种:定位 */
/* 子绝父相,需要知道盒子的大小
将盒子的左上角居中
再将盒子向左上移动宽和高的一半 */ /* body{
position: relative;
}
#box{
position:absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -75px;
} */ /* 第二种：定位 */
/* 子绝父相,不需要知道宽高，但是盒子必须有宽高 */ /* body{
position: relative;
}
#box{
position:absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
} */ /* 第三种：定位 */
/* 子绝父相,不需要知道宽高，盒子宽高不是必须的，使用CSS3新特性移动盒子,但是兼容性差 */ /* body{
position: relative;
}
#box{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
} */ /* 第四种使用弹性布局 ,主轴X轴居中，Y轴也居中.移动端经常用，但是也有兼容性问题*/
/* body{
display: flex;
justify-content: center;
align-items: center ;
}
#box{ } */ </style>
<body>
<div id="box">
chengjunfeng
</div>
</body> <script>
// 第五种，使用js方案
// let Html=document.documentElement,
// WinX=Html.clientWidth,
// WinY=Html.clientHeight,
// boxX=box.offsetWidth,
// boxY=box.offsetHeight;
//涨见识了，原来id可以直接用，box
// Html.style.position="relative";
// box.style.position="absolute";
// box.style.top=(WinY-boxY)/2+'px';
// box.style.left=(WinX-boxX)/2+'px';
</script>
</html>
关于页面布局中，如何让一个div水平和垂直居中的五个方案的更多相关文章
- 如何让一个div水平和垂直居中对齐
以下方法来自百度知道:https://zhidao.baidu.com/question/558984366971173044.html 方法1: .parent { width: 800px; he ...
- 负值之美：负margin在页面布局中的应用
本文转载自:http://www.topcss.org/?p=94,有修改. 负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这 ...
- 在HTML页面布局中,position的值有几种,默然的值是什么
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 让DIV水平和垂直居中的几种方法
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
- 【转】如何让DIV水平和垂直居中
来源:http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/ 我们在设计页面的时候,经常要把DIV居中显示,而且是相对 ...
- DIV水平和垂直居中的实现
在div的宽度和高度固定的情况下,实现div水平和垂直居中普遍采用如下的方式: <!DOCTYPE html> <html> <head> <style ty ...
- CSS：使用CSS3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
- 使当前对象相对于上层DIV 水平、垂直居中定位
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- 关于 静态页面布局 中的一些BUG
作为一枚初级程序猿,难免在制作静态页面时会遇到一些BUG,在此,我从网上找了一些资料并且结合自己的项目开发经验,总结了一些在静态页面布局时可能会遇到的问题,希望能对初级程序猿有一定的帮助(资料请参考: ...
随机推荐
- MySQL 合并查询，以map或对象的形式返回
转载 CSDN博主「小林子林子」 -> https://blog.csdn.net/qq_26106607/article/details/84961254 原始SQL-> 目的-> ...
- python实现从文件夹随机拷贝出指定数量文件到目标文件夹
为了方便倒腾数据,功能如题,该脚本和操作目录在同一根目录 实际运行时要手动修改程序中:cpfile_rand('img', 'outfile', 10) # 操作目录,输出目录,输出数量 import ...
- linux 测试端口是否可通
windows上一般用telnet 如telnet ip port linux上可以用telnet,跟windows一样 telnet ip port 也可以用wget:如:wget ip:port ...
- 【部分】ASP.NET MVC5 - 地址栏传参两种方法
地址栏传参两种方法 1- Home/Index/88 (后台控制器读取需要一样的参数名称) 2- Home/Index?id1=88?id2=99 (Request三种接受方法) ...
- pycharm中连接MySql出现 Exception in thread "main" java.lang.ClassNotFoundException: com.mysql.jdbc.的错误解决
具体异常如下: 这个异常特别烦人,是mysql连接驱动的问题,可以用二步解决: 第一步 从网上下载驱动,从mysql-connector-java_8.0.16-1ubuntu16.04_all.de ...
- 逃学的小孩,树形dp
先找到题 题意: 中文题,没什么好解释的,也没什么歧义. 分析: 首先我们想一下他的路径将会是怎样的:A-B-C/A-C-B,其实就是求一下min(AB+BC,AC+BC),ABC任选.挺简单,首先证 ...
- 03 Vue实例成员
Vue实例 1.el:实例 new Vue({ el: '#app' }) // 实例与页面挂载点一一对应 // 一个页面中可以出现多个实例对应多个挂载点 // 实例只操作挂载点内部内容 2.data ...
- Scala 基础（十六）：泛型、类型约束-上界(Upper Bounds)/下界(lower bounds)、视图界定(View bounds)、上下文界定(Context bounds)、协变、逆变和不变
1 泛型 1)如果我们要求函数的参数可以接受任意类型.可以使用泛型,这个类型可以代表任意的数据类型. 2)例如 List,在创建 List 时,可以传入整型.字符串.浮点数等等任意类型.那是因为 Li ...
- JVM 专题九：运行时数据区（四）本地方法栈
1. 本地方法栈 2. 什么是本地方法栈? Java虚拟机栈用于管理Java方法的调用,而本地方法栈用于管理本地方法的调用 本地方法栈,也是线程私有的. 允许被实现成固定或者是可动态拓展的内存大小 ...
- 数据可视化之DAX篇（二）Power BI中的度量值和计算列，你搞清楚了吗？
https://zhuanlan.zhihu.com/p/75462046 对于初学者,总是会把度量值和计算列搞混,我也经常碰到这样的问题,有些星友用文章中的代码总是报错,发给我一看,才知道TA把本来 ...