一、记录下几种盒子居中的方法：

1.0、margin固定宽高居中；

2.0、负margin居中；

3.0、绝对定位居中；

4.0、table-cell居中；

5.0、flex居中；

6.0、transform居中；

7.0、不确定宽高居中(绝对定位百分数)；

8.0、button居中。

二、代码演示(html使用同一个Demo)：

html Demo：

<body>

    <div id="container">

        <div id="box"></div>

    </div>

</body>

1.0、margin固定宽高居中(演示)

这种定位方法纯粹是靠宽高和margin拼出来的，不是很灵活。

CSS：

#container {

    width: 600px;

    height: 500px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    width: 200px;

    height: 200px;

    margin: 150px 200px;

    background-color: #0ff;

}

2.0、负margin居中(演示)

利用负的margin来进行居中，需要知道固定宽高，限制比较大。

CSS:

#container {

    position: relative;

    width: 600px;

    height: 500px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    position: absolute;

    width: 200px;

    height: 200px;

    left: 50%;

    top: 50%;

    margin: -100px -100px;

    background-color: #0ff;

}

3.0、绝对定位居中(演示)

利用绝对定位居中，非常常用的一种方法。

CSS:

#container {

    position: relative;

    width: 600px;

    height: 500px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    position: absolute;

    width: 200px;

    height: 200px;

    left:;

    top:;

    right:;

    bottom:;

    margin: auto;

    background-color: #0ff;

}

4.0、table-cell居中(演示)

利用table-cell来控制垂直居中。

CSS:

#container {

    display: table-cell;

    width: 600px;

    height: 500px;

    vertical-align: middle;

    border: 1px solid #000;

}

#box {

    width: 200px;

    height: 200px;

    margin: 0 auto;

    background-color: #0ff;

}

5.0、flex居中(演示)

CSS3中引入的新布局方式，比较好用。缺点：IE9以及IE9一下不兼容。

CSS:

#container {

    display: -webkit-flex;

    display: flex;

    -webkit-align-items: center;

            align-items: center;

    -webkit-justify-content: center;

            justify-content: center;

    width: 600px;

    height: 500px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    width: 200px;

    height: 200px;

    background-color: #0ff;

}

6.0、transform居中(演示)

这种方法灵活运用CSS中transform属性，较为新奇。缺点是IE9下不兼容。

CSS:

#container {

    position: relative;

    width: 600px;

    height: 600px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    position: relative;

    top: 50%;

    left: 50%;

    width: 200px;

    height: 200px;

    transform: translate(-50%, -50%);

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -moz-transform: translate(-50%, -50%);

    background-color: #0ff;

}

7.0、不确定宽高居中(绝对定位百分数)(演示)

这种不确定宽高的居中，较为灵活。只需要保证left和right的百分数一样就可以实现水平居中，保证top和bottom的百分数一样就可以实现垂直居中。

CSS:

#container {

    position: relative;

    width: 600px;

    height: 500px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    position: absolute;

    left: 30%;

    right: 30%;

    top: 25%;

    bottom: 25%;

    background-color: #0ff;

}

8.0、button居中(演示)

利用button做外容器，里边的块元素会自动垂直居中，只需要控制一下水平居中就可以达到效果。

HTML：

<button>

    <div></div>

</button>

CSS：

button {

    width: 600px;

    height: 500px;

    border: 1px solid #000;

}

div {

    width: 200px;

    height: 200px;

    margin: 0 auto;

    background-color: #0ff;

}

《Web开发中让盒子居中的几种方法》的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. Dynamics CRM 之ADFS 使用 WID 的联合服务器场

    使用 WID 的联合服务器场 默认拓扑 Active Directory 联合身份验证服务 (AD FS) 是联合服务器场,使用 Windows 内部数据库 (WID). 在这种拓扑, AD FS 使 ...

  2. OpenDigg前端开源项目周报1219

    由OpenDigg 出品的前端开源项目周报第二期来啦.我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开发方面的开源项目,方便前端开发人员便捷的找到自己需要的项目工具等.react-f ...

  3. android手机登录时遇到“QQ安全登录发现病毒”解决

    android手机作为开源系统非常容易感染病毒,有时候我们会经常遇到手机QQ登录时检测到app被感染,一般情况是由手机感染病毒所引起的,安装腾讯管家后只能检测病毒和卸载感染病毒的软件,不能清除病毒.解 ...

  4. Linux实战教学笔记06:Linux系统基础优化

    第六节 Linux系统基础优化 标签(空格分隔):Linux实战教学笔记-陈思齐 第1章 基础环境 第2章 使用网易163镜像做yum源 默认国外的yum源速度很慢,所以换成国内的. 第一步:先备份 ...

  5. Linux实战教学笔记04:Linux命令基础

    第四节:Linux命令基础 标签(空格分隔):Linux实战教学笔记 第1章 认识操作环境 root:当前登陆的用户名 @分隔符 chensiqi:主机名 -:当前路径位置 用户的提示符 1.1 Li ...

  6. Quartz

    Quartz是一个开源的作业调度框架,它完全由Java写成,并设计用于J2SE和J2EE应用中.它提供了巨大的灵 活性而不牺牲简单性.你能够用它来为执行一个作业而创建简单的或复杂的调度. eg: ja ...

  7. 从is(":checked")说起

    *此文所用jQuery版本应大于1.6.1   如何判断一个单选(复选)框是否选中. 对于刚接触jQuery的人,第一反应必然是. <input id="checkbox1" ...

  8. 将一句话里的单词进行倒置，标点符号不倒换。比如将“I come from Shanghai.”倒换后变为“Shanghai. from come I”

    string str = "I come from Shanghai."; //根据空格切割 string[] strS = str.Split(' '); string temp ...

  9. 用VB脚本批到导入字段到PowerDesigner

    在PowerDesigner使用脚本批量导入excel中记录的表结构信息,由于需要通过powerdesigner逆向工程创建一些sybase IQ的表,由于是接口数据,只有excel表,手动导入太耗时 ...

  10. Uncaught RangeError: Maximum call stack size exceeded 调试日记

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 开发道路上不是解决问题最重要,而是解决问题的过程,这个过程我们称之为~~~调试 记 ...