一.单行文字居中: 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. Android基础篇（一）

    Android体系结构介绍 Android是一个移动开发平台,层次结构:操作系统(OS).中间件(Middle Ware).应用程序(Application) 具体: 操作系统(OS)-->各种 ...

  2. Linux cp (复制)命令简介

    \cp  -rf  source1  source2   source3   ....   directory cp (复制档案或目录) [root@linux ~]# cp [-adfilprsu] ...

  3. Mac Pro 安装 Sublime Text 3，个性化设置，主题 和 插件 收藏

    1.到官网下载安装包 http://www.sublimetext.com/3 2.附注册码一枚 Sublime Text 3 3126 —– BEGIN LICENSE —– Alexey Plut ...

  4. Spring中集合类型属性注入

    我们都知道如何去注入普通属性的值,非常简单,那么我们如何去注入开发中常见的集合类型的属性了,别急,往下看. 这里将介绍如何给Map list set Array Properties 这些属性注入值. ...

  5. wdcp安装memcached解决办法

    1.下载libevent-1.4.14b-stable.tar.gz和memcached-1.4.15.tar.gz这两个文件,上传到服务器,并给它一个可用的下载地址, 如http://地址/memc ...

  6. iOS开发——高级篇——iOS中如何选择delegate、通知、KVO（以及三者的区别）

      在开发IOS应用的时候,我们会经常遇到一个常见的问题:在不过分耦合的前提下,controllers[B]怎么进行通信.在IOS应用不断的出现三种模式来实现这种通信:1委托delegation2通知 ...

  7. 【Python网络爬虫一】爬虫原理和URL基本构成

    1.爬虫定义 网络爬虫,即Web Spider,是一个很形象的名字.把互联网比喻成一个蜘蛛网,那么Spider就是在网上爬来爬去的蜘蛛.网络蜘蛛是通过网页的链接地址来寻找网页的.从网站某一个页面(通常 ...

  8. SpringMVC@RequestBody小细节

    关于@RequestBody  参数类型自己的包装类,还是类似String/int,区别: 1.@RequestBody LoginParmar parmar String user_number = ...

  9. centos 安装 rabbitMQ

    此类文章一大堆,本文主要站在开发角度保证基本rabbitmq的基本访问. 系统:centos6 64bit 官方指引:https://www.rabbitmq.com/install-rpm.html ...

  10. linux Mint截图软件 Shutter

    安装shutter: sudo add-apt-repository ppa:shutter/ppa sudo apt-get update sudo apt-get install shutter ...