<!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水平和垂直居中的五个方案的更多相关文章

  1. 如何让一个div水平和垂直居中对齐

    以下方法来自百度知道:https://zhidao.baidu.com/question/558984366971173044.html 方法1: .parent { width: 800px; he ...

  2. 负值之美：负margin在页面布局中的应用

    本文转载自:http://www.topcss.org/?p=94,有修改. 负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这 ...

  3. 在HTML页面布局中,position的值有几种,默然的值是什么

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. 让DIV水平和垂直居中的几种方法

    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

  5. 【转】如何让DIV水平和垂直居中

    来源:http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/ 我们在设计页面的时候,经常要把DIV居中显示,而且是相对 ...

  6. DIV水平和垂直居中的实现

    在div的宽度和高度固定的情况下,实现div水平和垂直居中普遍采用如下的方式: <!DOCTYPE html> <html> <head> <style ty ...

  7. CSS：使用CSS3将一个div水平和垂直居中显示

    使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...

  8. 使当前对象相对于上层DIV 水平、垂直居中定位

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  9. 关于 静态页面布局 中的一些BUG

    作为一枚初级程序猿,难免在制作静态页面时会遇到一些BUG,在此,我从网上找了一些资料并且结合自己的项目开发经验,总结了一些在静态页面布局时可能会遇到的问题,希望能对初级程序猿有一定的帮助(资料请参考: ...

随机推荐

  1. Hystrix入门教程

    Hystrix入门教程 一·什么是Hystrix?Hystrix有什么作用?使用Hystrix有哪些适用场景 Hystrix是springCloud的组件之一,Hystrix 可以让我们在分布式系统中 ...

  2. 在Github上建立自己的个人主页

    目录 注册Github账号 登录Github账号 建立新仓库 选择个人主页的主题 注册Github账号 首先打开Github的主页(https://github.com/),点击右上角的sign up ...

  3. 服务消费者（Feign-上）

    上一篇文章,讲述了Ribbon去做负载请求的服务消费者,本章讲述声明性REST客户端:Feign的简单使用方式 - Feign简介 Feign是一个声明式的Web服务客户端.这使得Web服务客户端的写 ...

  4. 基础-Junit单元测试_反射_注解

    一.Junit单元测试 1.1 测试分类: 黑盒测试:不需要写代码,给输入值,看程序是否能够输出期望的值. 白盒测试:需要写代码的.关注程序具体的执行流程. 1.2 Junit使用(白盒测试) 使用步 ...

  5. nth-child,nth-last-child,after,before,tab-highlight-color,first-child,last-child

    nth-child:定义第几个元素或者是奇数或者是偶数,或者满足某个数字倍数的dom的样式 如 li:nth-child(3n),结果如下,li:nth-child(2)结果如下

  6. call，apply，bind的内部原理实现

    call call 方法使用一个函数执行的时候更改本身 this 指向,并传入一个或者多个参数. var obj = { name: '$call' } function _fun() { conso ...

  7. How many ways??，题解

    题目: 题意: 找过k条边的路径个数. 分析: 首先注意一下题意,同一个点过两次算两次,做过类似的,过k条边的最短路,只要搞一个矩阵,然后快速幂就好了,这个也一样,维护信息变一下,然后就好了. 如果k ...

  8. Windows系统appium移动端自动化真机环境搭建

    appium-windows-android环境搭建完成以后,就可以进行真机模式下的appium环境搭建啦!! 准备:把要测试的app下载至本机(小波的是把apk放在桌面上,例如:C:\Users\w ...

  9. docker自动化部署前端项目实战一

    docker自动化部署前端项目实战一 本文适用于个人项目,如博客.静态文档,不涉及后台数据交互,以部署文档为例. 思路 利用服务器node脚本,监听github仓库webhook push事件触发po ...

  10. 属性复制神器-mapstruct

    我们之前说到项目中会用到各种object,vo,bo,dto等等.我们需要在不同的对象上复制属性. 一.BeanUtils和PropertyUtils 我们最常用的就是Common包里面的BeanUt ...