一.单行文字居中: 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. Nubia Z9 mini使用体验

    前续用的手机:荣耀6 想换的理由: 1, 充电不方便,除了原装的充电器和小米移动电源,其他的充电器和移动电源约有一半都只能以USB方式慢充,即使是2.0A以上输出电流的: 2, 拍照太渣. Z9 mi ...

  2. OpenVpn简单架设

    首先Wget wget http://swupdate.openvpn.org/as/openvpn-as-2.0.24-CentOS6.i386.rpm wget http://swupdate.o ...

  3. 【Maven】运行项目

    1.run as maven clean 清除原有的编译结果重新编译一次. 2.run as maven bulid.. goals:package tomcat7:deploy 打包到Tomcat7 ...

  4. js框架设计1.4类型判断

    这篇司徒大神介绍了很多js的 不靠谱类型判断.篇幅也是第一篇中最常的 ,经阅读后,以后一定要用框架的自带的类型判断,万万不可随便乱用js原生判断.

  5. Java通过sessionId获取Session

    Servlet2.1之后不支持SessionContext里面getSession(String id)方法. 但是,我们可以通过HttpSessionListener监听器和全局静态map自己实现一 ...

  6. css中一些常用技巧

    // css中引入字体文件 @font-face { font-family: msyh; /*这里是说明调用来的字体名字*/ src: url('../font/wryh.ttf'); /*这里是字 ...

  7. 调试asp.net网页时不显示treeview的原因

    在.net中本地调试asp.net网页时,treeview控件显示为文字方式,原因是在http://localhost/下面找不到webctrl_client的路径,解决的方法是把webctrl_cl ...

  8. How to Install The Alpha Control Packages.

    Uninstalling previous version of the package If you have a previous version of the package already i ...

  9. win7 打印机共享

    1.在工具->文件夹选项->查看,将"使用简单文件共享"前面的勾勾去掉2.在控制面板->用户帐号,将guest帐户启用3.运行"gpedit.msc&q ...

  10. [linux] grep awk sort uniq学习

    grep的-A-B-选项详解grep能找出带有关键字的行,但是工作中有时需要找出该行前后的行,下面是解释1. grep -A1 keyword filename找出filename中带有keyword ...