CSS 居中方法集锦（*******************************）

记录收集纯CSS层面实现的水平、垂直居中方法可用于块级、行内快、内联元素以及文字图片等。

  1. 水平或垂直居中 
    1.1 text-align
    1.2 margin
    1.3 line-height
    1.4 padding
  2. 水平与垂直同时居中
    2.1 挡板方式实现的水平垂直居中
    2.2 vertical-align
    2.3 模拟单元格特性
    2.4 position + margin:负值
    2.5 position + margin:auto
    2.6 position + translate
    2.7 position + calc
    2.8 相对于viewport进行水平垂直居中
    2.9 css3 - flex
  3. 图片相关的水平垂直居中
    3.1 背景图方式
    3.2 CSS 表达式
    3.3 button 方式
    3.4 网易NEC - 适合图片的方式

1. 水平或垂直居中

1.1 text-align

对于要求不高，并且内容是文本元素或是行内块元素(inline-block)，可以很容易的通过text-align:center进行水平居中。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            background:#eee;
            text-align: center;
        }
        span{
            display:inline-block;
            background:#aaa;
            width: 200px;
        }
    </style>
</head>
<body>
    <div>
        使用text-align:center进行水平居中<br/>
        <span>inline-block</span>
    </div>
</body>
</html>

1.2 margin

对于内容是块级元素,通过 margin:0px auto 可以很容易的进行水平居中。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            background:#eee;
            text-align: center;
        }
        p{
            background:#aaa;
            width:500px;
            line-height:100px;
            margin:0px auto;
        }
    </style>
</head>
<body>
    <div>
        <p>MARGIN:0PX AUTO</p>
    </div>
</body>
</html>
优点 缺点
简单直观 被水平居中的元素必须要有固定的宽度

1.3 line-height

对于内容是纯文本或者是行内快元素时，最简单的就是通过设置 line-height 实现垂直居中，不过这种方式有很大的不足之处，一是行高的值必须为当前父元素的高度，二是，只能一行，不能有多行。

优点 缺点
简单直观 只能作用于内联元素或行内块、只能一行不能多行、行高的值必须为父元素的高度

1.4 padding

如果父元素对于高度没有什么要求，可以通过设置 padding-top 与 padding-bottom 为相同值，来实现伪的垂直居中效果。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            padding:200px 0;
            background:#eee;
            text-align: center;
        }
        p{
            background:#aaa;
        }
    </style>
</head>
<body>
    <div>
        <p>PADDING</p>
    </div>
</body>
</html>
优点 缺点
非常简单 进行伪垂直居中的元素不能有高度

2. 水平与垂直同时居中

2.1 挡板方式实现的水平垂直居中

我称这种方式为挡板方式，是因为它在实现方式上很类似。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:600px;
            height:600px;
            background:#eee;
        }
        .top{
            height:50%;

        }
        .box1{
            width:200px;
            height:200px;
            background:#aaa;
            margin:0px auto;
            margin-top:-100px;

        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top"></div>
        <div class="box1"></div>
    </div>
</body>
</html>
优点 缺点
不需要定位 依然需要计算与设置负边距值
要引入一个废标签

Note： 但在实际的使用上如果不考虑IE7-，那个无用的元素可以使用伪类替代。

2.2 vertical-align

vertial-align 是CSS的一个属性，该属性只对行内元素或行内快元素产生作用，主要用于设置当前元素与同级相邻元素的垂直对齐方式(基于基线)。常用于图片与文字的对齐。
这里则是利用 vertical-align 这种对齐 的特性来在父元素中插入一个高度与其相同的子元素，最后再为该子元素设置 vertical-align 属性来对齐我们真正的内容。
这种方式还是蛮巧妙的，但是我认为其局限性在于只能作用于行内或行内快，另外要插入一个无关的废标签，不过该标签可以通过伪类进行代替。
最将 text-align:center 与 vertical-align:middle，结合使用，我们便可以将行内快元素水平垂直居中
示例：

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <style>
         div{
             width:300px;
             height:200px;
             text-align:center;
             background:#eee;
             text-align:center;
         }
         div:after{
             content:‘‘;
             display:inline-block;
             width: 1px;
             height:100%;
             vertical-align:middle;
         }

     </style>
 </head>
 <body>
     <div>
         <button>button1</button>
         <button>button2</button>
     </div>
 </body>
 </html>

2.3 模拟单元格特性

我们知道表格有很多特性，比如宽度的关联伸缩，再比如我们现在需要用到的垂直居中，而正好的是CSS也可以通过display属性为HTML元素赋予表格元素的特性。
常见的有：
display:table 声明一个表格
display:table-row 声明一个行
display:table-cell 声明一个单元格。

简单的使用示例（快速入门）：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>

            .table{
                display:table;
                border:1px solid #ccc;

            }
            .row{
                display:table-row;
            }
            .cell{
                display:table-cell;
                border:1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div class="table">
            <div class="row">
                <div class="cell">ROW1-CELL1</div>
                <div class="cell">ROW1-CELL2</div>
            </div>
            <div class="row">
                <div class="cell">ROW2-CELL1</div>
                <div class="cell">ROW2-CELL2</div>
            </div>
        </div>
    </body>
    </html>

因此利用这种手段，我们也可以实现需要的水平垂直居中效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            display:table-cell;
            width:500px;
            height:500px;
            background:#eee;
            vertical-align:middle;
            text-align: center;
        }
        p{
            display:inline-block;
            background:#aaa;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>
            TABLE-CELL-TEST<br/>
            TABLE-CELL-TEST<br/>
            TABLE-CELL-TEST<br/>
        </p>
    </div>
</body>
</html>
优点 缺点
垂直居中多行内容特别是文字内容 只有IE8+ 才支持
只能垂直居中内联元素、行内块　

通过模拟表格的方其优点在于可以垂直居中多行内容，但是缺点就是目前只有IE8+的版本才被支持。

2.4 position + margin:负值

通过定位可以实现水平垂直居中，不过对使用的条件要求较高，首先内容要进行绝对定位(absolute)，父元素要进行相对定位(relative)，其次内容要有固定的尺寸，最后调整margin负值与偏移属性的值。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            position:relative;
            height:600px;
            width:600px;
            background:#eee;
        }

        p{
            position:absolute;
            width:200px;
            height:200px;
            top:50%;
            left:50%;
            margin-left:-100px;
            margin-top:-100px;
            background:#aaa;
        }
    </style>
</head>
<body>
    <div>
        <p>MARGIN:0PX AUTO</p>
    </div>
</body>
</html>
优点 缺点
应用范围光
兼容性好		 进行居中的元素要有固定的尺寸
要计算margin负边距值

2.5 position + margin:auto

对于绝对定位的元素来说,其默认效果是：

  • 尺寸会自动收缩适应内容。
  • 位置默认的是auto，
  • 边距则默认值为0。

此时如果在默认尺寸的情况下，我们将其四个方向的偏移值都设置为0的话，元素会自动向四个方向拉伸100%贴合其参照元素。如果再设置固定宽度，并设置 margin:auto,那么便可以惊奇的发现，绝对定位的元素会水平垂直居中在父元素（参照元素）中。

关于 margin:auto为什么能水平居中块级而不能垂直居中的问题
auto是自动分配的意思，margin:auto,便是自动分配边距的意思。但是根据CSS2.1的规范，块级元素的宽度是参照其父元素的宽度（也就是为什么块级元素独占一行的原因），只有宽度是100%，auto才能够进行分配，然后让元素水平居中，但是问题来了，CSS规范同时也定义了块级元素的高度是根据内容适应，也就是说块级元素的高度是不可知的，所以为上下边距设置auto当然不能进行垂直居中。然而当我们给一个元素进行定位，使其成为块级元素并脱离文档流时，又同时为其设置top:0;right:0;bottom:0;left:0，便会将该元素的尺寸完全贴合其父元素或参照元素，即width:100%,height:100%,那么此时再设置margin:auto,便可以进行水平/垂直居中。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>

        .box{
            position:relative;
            width:600px;
            height:600px;
            background:#aaa;
        }
        p{
            position:absolute;
            width:200px;
            height:200px;
            left:0;
            right:0;
            bottom:0;
            top:0;
            margin:auto;
            background:#eee;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>This is Position Advace</p>
    </div>
</body>
</html>
优点 缺点
使用条件简单
无需计算负边距值		 进行居中的元素要有固定的尺寸
只有IE8+支持

2.6 position + translate

通过CSS3的 translate 实现的水平垂直居中，其原理与position+margin负值的方式很类似。
但是相比于margin负值方式，其优点体现于：

  • 不需要为内容设置固定的宽度。
  • 不需要手动计算负边距值。

transform:translate(-50%,-50%) 可以自动向左与向上移动当前元素宽度的50%。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            position:relative;
            height:600px;
            width:600px;
            background:#eee;
        }
        p{
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
            background:#aaa;
        }

    </style>
</head>
<body>
    <div>
        <p>transForm</p>
    </div>
</body>
</html>
优点 缺点
可以不需要为居中的盒子设置固定的尺寸
手机端		 只有IE9+支持

2.7 position + calc

calc() 是CSS3的函数属性，其功能是进行四则运算，参与运算的值可以是相对单位，也可以是绝对单位。
利用calc进行居中的原理其实就是通过为left:50%,top:50%,然后让50%再减去当前元素宽度或者高度的一半，其机制仍然属于负边距方式，但相比于position的负边距以及于translate等方式，它主要减少了样式的声明数量。
示例：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>

        .box{
            position:relative;
            width:600px;
            height:600px;
            background:#aaa;
        }
        p{
            position:absolute;
            width:200px;
            height:200px;
            left:calc(50% - 100px);
            top:calc(50% - 100px);
            background:#eee;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>CSS3 - CALC</p>
    </div>
</body>
</html>
优点 缺点
减少样式声明
手机端		 需要为居中的元素设置固定尺寸
只有IE9+、Chrome19+

2.8 相对于viewport进行水平垂直居中

CSS3中引入了新的度量单位，vh 与 vw，它们都是基于viewport的相对单位，即viewport的宽度与高度分别被分为100等份的vh 与 vw。
也就是说：
1vh = 1%(viewport的高度)
1vw = 1%(viewport的宽度)
那么为当前元素的尺寸设置为 50vh与50vw 即当前窗口的高度与宽度的一半，再结合 translate(50%,50%) 便可以将当前元素水平垂直居中在当前窗口中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p{
            position:absolute;
            width:50vw;
            height:50vh;
            transform:translate(50%,50%);
            background:#eee;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>CSS3 - CALC</p>
    </div>
</body>
</html>
优点 缺点
在基于窗口的环境下使用 只有IE9+ 、Chrome26+、Firefox19+、safair6.0+ 支持
固定尺寸

2.9 css3 - flex

flex可谓是CSS3加入的强大布局特性，利用flex我们可以实现灵活方便且可塑的布局方案。
利用flex布局只需要简单的设置两行样式声明即可实现元素的水平与垂直居中。
justify-content:center 水平居中排列
align-items:center 垂直居中排列
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>

        div{
            display:flex;
            justify-content:center;
            align-items:center;
            text-align: center;
            background:#eee;
        }

        p{
            background:#aaa;
        }

    </style>
</head>
<body>
    <div>
        <p>FLEX</p>
    </div>
</body>
</html>
优点 缺点
移动端 
无需设置固定尺寸		 兼容性低版本IE不支持

3 图片相关的水平垂直居中

专门用于图片水平垂直居中的CSS方法，并且以下方法都可以在所有浏览器中得到兼容。

3.1 背景图方式

这种方式最简单，就是将图片作为背景图，然后设置 background-position:center center 让其水平垂直居中在元素中。

3.2 CSS 表达式

这种方式要借助IE的私有扩展，并且这种方式的好处是可以兼容到IE5。
缺点也很明显，就是只能用于图片，因为这涉及到CSS表达式中的 this.height。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            display:table-cell; /* 在高版本浏览器中通过表格特性进行垂直居中图片 */
            width:500px;
            height:500px;
            vertical-align: middle;
            background:#eee;
        }
        .box img{
            display: block;
            margin:0px auto;
            margin-top:expression((500 - this.height)/2); /* IE 浏览器的专有CSS 表达式属性 */
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="http://nec.netease.com/img/s/1.jpg" alt="" />
    </div>
</body>
</html>

3.3 button 方式

这种方式有些过滤奇技淫巧，但是好处就是可以兼容所有浏览器，但是在IE浏览器中会有稍微的瑕疵，也就是当单击的时候，图片会有轻微的晃动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        button{
            height:500px;
            width:500px;
            background:#eee;
            border:none;
            outline:none;
        }
    </style>
</head>
<body>
    <button>
        <img src="http://nec.netease.com/img/s/1.jpg" alt="" />
    </button>
</body>
</html>

3.4 网易NEC - 很适合图片的方法

这种网易NEC发明的方式，其优点在于只要图片的尺寸不超过父元素，图片都会在父元素中居中。

原理：
首先为外层盒子进行相对定位，然后为内部盒子进行绝对定位，并且尺寸是由其内容（图片）撑开，再为内部盒子设置偏移值 left:50%;top:50%;最后再将其内部放入两个img标签，但引用的都是一张图片，其中一张图片进行占位隐藏用于让内部盒子识别尺寸，另一张图片则是用来显示，并且这张图片再进行绝对定位，然后left:-50%;top:-50%，这样便可以将图片水平、垂直居中在父元素中。

示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box {
            position:relative;
            width: 600px;
            height: 600px;
            background:#eee;

        }
        .inner{
            position:absolute;
            left:50%;
            top:50%;
        }
        .inner .img1{
            visibility: hidden;
        }
        .inner .img2{
            position:absolute;
            left:-50%;
            top:-50%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner">
            <img class="img1" src="http://nec.netease.com/img/s/1.jpg" />
            <img class="img2" src="http://nec.netease.com/img/s/1.jpg" />
        </div>
    </div>
</body>
</html>

呼~~ 终于把博客园的markdown改好了，以后就决定用这个样式了，感觉园子的markdown真心不好用啊，功能也不全。。

时间： 2024-12-18 19:25:05

CSS 居中方法集锦（*******************************）的相关文章

css居中方法详解

第一种居中方式: 使用margin:auto; 这应该是使用最多的居中方式了,但也有着局限性,居中的元素需要设置宽度,而且是块元素才行,并且只能实现水平居中,这个方法的原理是让浏览器自动去计算左右边距从而实现居中: <div class="big"> <div class="small"></div> </div> .big{ width: 200px; height: 100px; background: blue;

css居中方法小结

首先说明在CSS中的vertical-align属性只对HTML元素中拥有vertical-align特性的元素才生效,只有inline-block元素是有vertical-align属性的,而像<div>.<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用. 一.单行垂直居中 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可.如: div { h

css居中方法

方案思路: 水平居中设置 1.行内元素 设置 text-align:center 2.定宽块状元素 设置 左右 margin 值为 auto 3.不定宽块状元素 a:在元素外加入 table 标签(完整的,包括 table.tbody.tr.td),该元素写在 td 内,然后设置 margin 的值为 auto b:给该元素设置 displa:inine 方法 c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:

&lt;转载&gt;使CSS文字图片div元素居中方法之水平居中的几个方法

文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法呢比较简单.直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了. 2 确定宽度的块级元素水平居中怎么设置呢?设置方法也

css常见居中方法

在css布局中,居中占着很关键的作用,如果不能很好的运用居中,就会导致整个页面的混乱. 在实际页面布局中,居中的方法有很多,有很多简单实用的方法,也有老实的方法.刚开始写页面的时候,我比较喜欢用老实的方法去写,因为不会错,但我们也应该掌握常见的居中方法. 常见居中方法: text-align:center 在父容器里水平居中 inline文字,或inline元素. vertical-ailgn:middle 垂直居中 inline文字,inline元素,配合display:table,displ

css 元素居中方法

目前知道有两种方法 方法一:主要适用于元素未设定高度的情况下. 直接上代码 html: 1 <div class="nav-content"> 2 <ul ng-click="navItem($event)" ng-model="navType"> 3 <li id="nav_msglist"> 4 <a href="#/">消息列表</a> 5

CSS动效集锦，视觉魔法的碰撞与融合（二） - 知乎

原文:CSS动效集锦,视觉魔法的碰撞与融合(二) - 知乎 引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代,做一一告别. CSS有他难以做到的事情,我们帮他用lottie解决 CSS有他可以做到的事情,我们用我们的头脑帮他解决 本文实现的CSS效果一览 标题吸顶 手写箭头 文字背景 圆形天坑 按钮波澜 动态方形 加载骨架 多行省略 标题吸顶 s

CSS居中之美

关于居中,你会想到什么? div{margin: auto;} 常见的居中方法 水平居中 .demo{ text-align: center; margin: auto; position: absolute; left: 50%; margin-left: -?px; } 垂直居中 .demo{ height: 30px; line-height: 30px; display: table-cell; vertical-align: middle; position: absolute; to

css居中问题

学习过程中遇到css居中问题 , 也查阅了资料,每个人的方法都不尽相同,而且当时看懂了,过后就记混淆了;so作为一个前端小白,也来写一下俗话说好脑子不如烂笔头,毕竟自己知道的也不多,其实是抱着学习和交流的态度啦.话不多说,直接来(注:本文中的属性都是在chrome浏览器下试验的); 一 : 一个父盒子,一个子盒子如何居中(高度已知) 最简单的一种: 就是使用定位,父盒子relative,子盒子absolute,然后子盒子left和top值各50%;在设置margin值,left和top值是本身盒