一.单行文字居中: 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. linuxmint 17没有vim

    首先上软件管理器中安装vim,之后配置.vimrc文件 下面是从网上摘抄的配置文件: """""""""&qu ...

  2. 评价cnblogs.com的用户体验

    我们作为大学计算机科学与技术专业的本科生,使用博客园主要是用来搜索和阅读技术资料,并且使用它来编辑发表博客.我们偏向于搜索便捷,界面友好的网站风格.我们对cnblogs的期望是更便捷精准,更便于编辑. ...

  3. itrator控制迭代次数

    <s:iterator value="diys" status="d" begin="0" end="10" st ...

  4. 【转】MVC中处理Json和JS中处理Json对象

    事实上,MVC中已经很好的封装了Json,让我们很方便的进行操作,而不像JS中那么复杂了. MVC中: public JsonResult Test() { JsonResult json = new ...

  5. PHP 变量声明的意义

    有人说,PHP是没有类型的语言,个人比较倾向于,PHP是弱类型的计算机脚本语言的说法. 计算机存储都是二进制的数据,要么是0,要么是1. 在抽象数据的过程中,是要有各种各样的标志位来识别数据. 虽然, ...

  6. WEB API异常处理

    当一个web api抛出一个异常后 此异常会被转化成一个HTTP响应 错误代码为500的服务错误 但是如果你不想让客户端看到500的错误码 你也可以自定义错误码 如下代码当用户输入的ID没有与之相关的 ...

  7. mongodb更新操作

    除了查询条件,还可以使用修改器对文档进行更新. 1. $inc > db.tianyc03.find() { "_id" : ObjectId("50ea6b6f1 ...

  8. Java 深拷贝、浅拷贝及Cloneable接口

    Cloneable接口是一个空接口,仅用于标记对象,Cloneable接口里面是没有clone()方法,的clone()方法是Object类里面的方法!默认实现是一个Native方法 protecte ...

  9. go：windows下用sublime Text搭建go语言开发环境

      一.安装   1.安装go    go安装包地址:http://pan.baidu.com/s/1hq1mrDM(进入下图中箭头所示目录中下载对应版本) * 注意go的安装路径不能包含中文    ...

  10. 导入excel数据到数据库

    1.上传excel到服务器 jsp页面代码 <form action="actionname" method="post" id="form1& ...