<!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. 【SpringMVC】

    前言

  2. 【Spring】内嵌Tomcat&去Xml&调试Mvc

    菜瓜:今天听到个名词“父子容器”,百度了一下,感觉概念有点空洞,这是什么核武器? 水稻:你说的是SpringMvc和Spring吧,其实只是一个概念而已,用来将两个容器做隔离,起到解耦的作用,其中子容 ...

  3. node+ajax实战案例（6)

    8.删除客户 8.1.发送id到后台 删除用户信息比较简单,只需要把对应行的id发送到后台就可以了 oTable.onclick = function (ev) { var ev = ev || ev ...

  4. MFC线程(二):线程同步临界区CRITICAL SECTION

    当多个线程同时使用相同的资源时,由于是并发执行,不能保证先后顺序.所以假如时一个公共变量被几个线程同时使用会造成该变量值的混乱. 下面来举个简单例子. 假如有一个字符数组变量 char g_charA ...

  5. Java BigDecimal和double BigDecimal类

    BigDecimal类 对于不需要任何准确计算精度的数字可以直接使用float或double,但是如果需要精确计算的结果,则必须使用BigDecimal类,而且使用BigDecimal类也可以进行大数 ...

  6. jQuery动态生成<select>下拉框

    前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...

  7. 洛谷 P1194 【买礼物】

    这道题其实就是转化一个模型就可以了. 买了一个另外一个又优惠,其实就相当于在优惠的时候连一条边,因为不可能多买,所以就是建一棵最小生成树.最后因为肯定买了一件物品,要加上最初的单价. 代码: #inc ...

  8. 使用Spring Cache集成Redis

    SpringBoot 是为了简化 Spring 应用的创建.运行.调试.部署等一系列问题而诞生的产物,自动装配的特性让我们可以更好的关注业务本身而不是外部的XML配置,我们只需遵循规范,引入相关的依赖 ...

  9. Python中的错误和异常

    前言 错误是程序中的问题,由于这些问题而导致程序停止执行.另一方面,当某些内部事件发生时,会引发异常,从而改变程序的正常流程. python中会发生两种类型的错误. 语法错误 逻辑错误(异常) 语法错 ...

  10. " 橘松 " 的自我介绍

    昵称:(OrangeCsong)橘松(在其他平台也是这个名字) 年龄:95后(摩羯座) 性别:boy 性格:性格还阔以,不轻易发脾气,沉稳.喜欢独立思考. 爱好:运动(工作了,运动时间太少),基金理财 ...