一.单行文字居中: height: 100px;height: 100px;overflow: hidden;

二.多行内容居中(容器的高度不能固定): padding-top: 24px;padding-bottom: 24px;

三.块级实现垂直居中:

1.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

*{

    padding: 0;

    margin: 0;

}

html, body {

    position: relative;

    height: 100%;

    width: 100%;

}

#div1{

    width: 200px;

    height: 200px;

    overflow: auto;

    margin: auto;

    position: absolute;

    top: 0; left: 0; bottom: 0; right: 0;

    background-color: yellow;

}

</style>

</head>

<body>

<div id="div1">千万千万请求请求请求</div>

</body>

</html>

通过position: absolute; top: 0; left: 0; bottom: 0; right: 0;实现居中，div的高度、宽度需要固定。

当子元素高宽大于父元素时且需兼容IE8时只能使用该方式。

2.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

*{

    padding: 0;

    margin: 0;

}

html, body {

    position: relative;

    height: 100%;

    width: 100%;

}

#div1{

    width: 200px;

    height: 200px;

    overflow: auto;

    margin: auto;

    position: absolute;

    left: 50%;

    top: 50%;

    margin-left: -100px;

    margin-top: -100px;

    background-color: yellow;

}

</style>

</head>

<body>

<div id="div1">千万千万请求请求请求</div>

</body>

</html>

通过position: absolute; left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;实现居中，div的高度、宽度需要固定

3.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

*{

    padding: 0;

    margin: 0;

}

html, body {

    height: 100%;

    width: 100%;

    position: relative;

}

#div1{

    width: 200px;

    height: 200px;

    overflow: auto;

    position: absolute;

      top: 50%;

      left: 50%;

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

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

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

    margin: auto;

    background-color: yellow;

}

</style>

</head>

<body>

<div id="div1">千万千万请求请求请求</div>

</body>

</html>

通过transform属性实现居中，高度、宽度不需要固定。

4.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

*{

    padding: 0;

    margin: 0;

}

html, body {

    height: 100%;

    width: 100%;

    position: relative;

    display: table;

}

.table{

    display: table-cell;

      vertical-align: middle;

}

#div1{

    width: 200px;

    height: 200px;

    overflow: auto;

    margin: 0 auto;

    background-color: yellow;

}

</style>

</head>

<body>

<div class="table">

    <div id="div1">

        千万千万请求请求请求

    </div>

</div>

</body>

</html>

通过父元素设置为display: table;子元素设置为display: table-cell; vertical-align: middle;实现居中，div的高度、宽度不需要固定。

子元素高宽大于父元素时会将父元素撑开。导致无法居中。

5.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

*{

    padding: 0;

    margin: 0;

}

html, body {

    height: 100%;

    width: 100%;

    display: box;

    display: -webkit-box;

    display: -ms-box;

    -webkit-box-pack: center;

    -ms-box-pack: center;

    box-pack: center;

    -webkit-box-align: center;

    -ms-box-align: center;

    box-align: center;

}

#div1{

    width: 200px;

    height: 200px;

    background-color: yellow;

}

</style>

</head>

<body>

    <div id="div1">

        千万千万请求请求请求

    </div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

*{

    padding: 0;

    margin: 0;

}

html, body {

    height: 100%;

    width: 100%;

    display: flex;

    align-items: center; /*定义body的元素垂直居中*/

    justify-content: center; /*定义body的里的元素水平居中*/

}

#div1{

    width: 200px;

    height: 200px;

    background-color: yellow;

}

</style>

</head>

<body>

    <div id="div1">

        千万千万请求请求请求

    </div>

</body>

</html>

通过flexbox的css3属性实现，display: box;box-pack: center;box-align: center;div的高度、宽度不需要固定。

css实现水平垂直居中的更多相关文章

  1. CSS实现水平|垂直居中漫谈

    利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...

  2. 纯CSS制作水平垂直居中“十字架”

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

  3. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

  4. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  5. 你知道CSS实现水平垂直居中的第10种方式吗？

    你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...

  6. css实现水平 垂直居中

    css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. CSS制作水平垂直居中对齐 多种方式各有千秋

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

  8. css各种水平垂直居中

    css各种水平垂直居中,网上查了一下,总结以下几种 line-height垂直居中 缺点,仅限于单行文字 .item{ text-align: center; height: 100px; line- ...

  9. CSS实现水平垂直居中的数种方法整合

    CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...

  10. CSS如何水平垂直居中？

    CSS如何水平垂直居中? 1.CSS如何实现水平居中? margin: 0 auto 2.CSS如何实现水平垂直居中? 首先设置一个div元素,设置背景颜色以便看出变化.代码如下: <!DOCT ...

随机推荐

  1. NOSDK--一键打包的实现（四）

    1.4 打包及签名的脚本介绍 我们使用ant来实现打包,这节我们先介绍脚本内容,关于脚本环境配置问题,我们将在下节做一个详细的介绍. 首先我们来看下build_android/tools/platfo ...

  2. mysql登录报错“Access denied for user 'root'@'localhost' (using password: YES”的处理方法

    使用/etc/mysql/debian.cnf文件中[client]节提供的用户名和密码: 文件内容: [client]host = localhostuser = debian-sys-maint ...

  3. jQuery包装集

    jQuery包装集指的是通过$()方法返回的一个元素集,这跟一般的javascript数组有所区别, 包装集在后者的基础上还有一些初始化的函数和属性. 我们可以对二者进行一个比较: jsdiv = d ...

  4. Linux mkdir 创建文件夹命令

    介绍: 该命令创建指定的目录名,要求创建目录的用户在当前目录中具有写权限,并且指定的目录名不能是当前目录中已有的目录 语法: mkdir [-m] [-p] 目录名 选项介绍: -m: 对新建目录设置 ...

  5. 进阶系列五【绝对干货】----Git教程

    一.介绍 1.1Git是什么? Git是目前世界上最先进的分布式版本控制系统.什么是版本控制系统?请自行百度. 1.2Git与SVN对比有什么特点? SVN是集中式版本控制系统.版本库是集中放在中央服 ...

  6. Google疯了，竟然这样！

    导读 一个小问题:你每天做什么事?当然了,好多事情,但是我可以指出一件事,你几乎每天都会用 Google 搜索,我说的对吗?现在,如果你是一位 Linux 用户,这里有另外一个问题:如果你甚至不用离开 ...

  7. (原)android补间动画(四)之插补器Interpolator

    比如说一段旋转动画 RotateAnimation animation = new RotateAnimation(0, 360, mMoveCircle.getMeasuredWidth() / 2 ...

  8. 定时刷新之setTimeout（只一次）和setInterval（间隔相同时间）的使用

    setTimeout和setInterval的使用 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.不过两者各有各的应用场景. 方 法 实际上,setTimeout和setIn ...

  9. 基于Libevent的HTTP Server

    简单的Http Server 使用Libevent内置的http相关接口,可以很容易的构建一个Http Server,一个简单的Http Server如下: #include <event2/e ...

  10. ubuntu下配置jdk

    1.首先下载jdk-7u51-linux-i586.tar.gz.并将它放在例如/home目录. 2.解压安装 sudo tar zxvf ./jdk-7u51-linux-i586.tar.gz  ...