一.单行文字居中: 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. Qt、VTK配置常见问题

    QVTKWidget undefined reference to 问题,一定要在pro文件中添加库 libvtkGUISupportQt-6.3. 2. CMAKE_MAKE_PROGRAM     ...

  2. uboot学习第一天

    Windows操作系统BIOS(设置) Windows系统 文件系统 驱动程序 应用程序 linux操作系统bootloader(引导系统) kernel(内核) 文件系统 驱动程序 应用程序 交叉编 ...

  3. 用JS获取地址栏参数的方法

    采用正则表达式获取地址栏参数: function GetQueryString(name) {      var reg = new RegExp("(^|&)"+ nam ...

  4. 时下手机和p2p理财的共同点

    1, 雨后春笋,百家争鸣:一会听说这个又做手机了,一会听说哪哪哪又搞了个P2P. 2, 性价比高的都得靠抢:手机配置高价格低的要抢:p2p利率高时间短的要抢. 3, 竞争惨烈:手机千元机各种血拼:P2 ...

  5. GitHub for windows呆瓜级入门

    一.GitHub是一个远程数据托管平台,对于代码用于版本控制(保存各个阶段的代码版本).首先去 https://github.com/ 注册一个GitHub账号 二.输入用户名(不能重复,相当于在Gi ...

  6. 快速上手制作Icon Font

    现在在提起Icon Font,已经不是什么新鲜的词汇了,网上已经有很多介绍它的文章,并且很多网站也已经将它用到,本篇主要是将制作Icon Font的整个流程整理一下,并且加入了自己在制作中遇到的问题, ...

  7. spring+IOC+DI+AOP优点分析（一）

    Spring是什么: Spring是一个轻量级的DI和AOP容器框架. 说它轻量级有一大部分原因是相对与EJB的(虽然本人从没有接触过EJB的应用),重要的是,Spring是非侵入式的,基于sprin ...

  8. 网站开发HTML部分课堂小结

    网页分为静态网页和动态网页两种 常用的是动态网页 静态网页修改数据是需要修改源代码,动态网页通过后台网页就可以修改静态网页有:HTML 内容(Hyper Text Markup Language 超文 ...

  9. xcode 常见错误报错问题！

    1:module  file '/Users/shaka/Library/Developer/Xcode/DerivedData/ModuleCache/92IKIZLYISUT/Darwin-2OA ...

  10. linux下bus、devices和platform的基础模型

    转自:http://blog.chinaunix.net/uid-20672257-id-3147337.html 一.kobject的定义:kobject是Linux2.6引入的设备管理机制,在内核 ...