第一种:

用css的position属性

    <style type="text/css">
.div1 {
width: 100px;
height: 100px;
border: 1px solid #000000;
position: relative;
} .div2 {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style> <div class="div1">
<div class="div2 ">
</div>
</div>

效果图:

第二种:

利用css3的新增属性table-cell, vertical-align:middle;

    <style type="text/css">
.div1 {
width: 100px;
height: 100px;
border: 1px solid #000000;
display: table-cell;
vertical-align: middle;
} .div2 {
width: 40px;
height: 40px;
background-color: red;
margin: auto;
} </style> <div class="div1">
<div class="div2">
</div>
</div>

效果:

第三种:

利用flexbox布局

<style type="text/css">
.div1 {
width: 100px;
height: 100px;
border: 1px solid #000000;
display: flex;
/*!*flex-direction: column;*!可写可不写*/
justify-content: center;
align-items: center;
} .div2 {
height: 40px;
width: 40px;
background-color: red;
}
</style>
<div class="div1 ">
<div class="div2 ">
</div>
</div>

效果:

第四种:

利用transform的属性(缺点:需要支持Html5)

<style type="text/css">
.div1 {
width: 100px;
height: 100px;
border: 1px solid #000000;
position: relative;
} .div2 {
height: 40px;
width: 40px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div class="div1 ">
<div class="div2 ">
</div>
</div>

效果图:

CSS盒子居中的常用的几种方法的更多相关文章

  1. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  2. java 获取键盘输入常用的两种方法

    java 获取键盘输入常用的两种方法 方法1: 通过 Scanner Scanner input = new Scanner(System.in); String s = input.nextLine ...

  3. Css三栏布局自适应实现几种方法

    Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...

  4. 浅谈MySQL中优化sql语句查询常用的30种方法 - 转载

    浅谈MySQL中优化sql语句查询常用的30种方法 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中使 ...

  5. 使用.Htaccess文件实现301重定向常用的七种方法

    使用.Htaccess文件实现301重定向常用的七种方法   301重定向对广大站长来说并不陌生,从网站建设到目录优化,避免不了对网站目录进行更改,在这种情况下用户的收藏夹里面和搜索引擎里面可能保存的 ...

  6. CSS + ul li 横向排列的两种方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. css盒子居中

    方法1(margin: 0 auto)<!DOCTYPE html> <html lang="en"> <head> <meta char ...

  8. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  9. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

随机推荐

  1. extjs动态插入一列

    StdDayWordQuery:function(btn,event){ var form=Ext.getCmp('queryFormSDW'); var userNameORuserCode = f ...

  2. css--小白入门篇1

    一.引入 css用来描述html,学习css前我们先来学习html的基础标签的用法,再进入css的学习. 本教程面向小白对象,不会讲细枝末节深入的东西. 二.列表 列表有3种 2.1 无序列表 无序列 ...

  3. Intellij idea 生成for循环代码块

    itar 生成array for代码块 for (int i = 0; i < array.length; i++) { = array[i]; } itco 生成Collection迭代 fo ...

  4. pageContext对象的使用及常用方法

    pageContext对象的使用及常用方法 制作人:全心全意 获取页面上下文的pageContext对象是一个比较特殊的对象,通过它可以获取JSP页面的request.response.session ...

  5. 常用的HTTP测试工具谷歌浏览器插件汇总

    网页的开发和测试时最常见的测试就是HTTP测试,作为曾经的测试人员在这方面还是略知一二的.其实做网页测试工作是非常繁琐的时期,有时候甚至是无聊重复的,如果没有网页测试工具的帮助的话,测试人员会越做越怀 ...

  6. Python面向对象之面向对象封装案例

    面向对象封装案例 封装 封装是面型对象编程的一大特点 面向对象编程的第一步--将属性和方法封装到一个抽象的类中: 外界使用类创建对象,然后让对象调用方法: 对象方法的细节都被封装在类的内部. 一个对象 ...

  7. react----父子组件之间的参数传递

    1.父组件向子组件传递参数 //父组件 import React from 'react'; import './header.css' import ComponentChild from './h ...

  8. 将网络图片转换为base64

    public static function htmlPdf() { $img_path = Env::get('ROOT_PATH').'/public/images/wechat/user.jpg ...

  9. [luoguP1282] 多米诺骨牌(DP + 背包)

    传送门 将问题转换成分组背包,每一组有上下两个,每一组中必须选则一个,上面的价值为0,下面的价值为1,求价值最小 因为要求上下两部分差值最小,只需从背包大小为总数 / 2 时往前枚举,找最小答案即可. ...

  10. 20180710使用gh

    转自:http://www.ywnds.com/?p=14265 一.背景 GitHub正式宣布以开源的方式发布gh-ost:GitHub的MySQL无触发器在线更改表定义工具!下面是官方给出gh-o ...