资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

CSS怎么实现元素居中

这篇文章将为大家详细讲解有关CSS怎么实现元素居中，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联是专业的立山网站建设公司，立山接单;提供网站设计、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行立山网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的，在实践中，它往往难住了很多人。

让元素水平居中相对比较简单：如果它是一个行内元素，就对它的父元素应用 text-align: center；如果它是一个块级元素，就对它自身应用 margin: auto。

然而如果要对一个元素进行垂直居中，那就没有那么容易了，有时候光是想想就令人头皮发麻了。

本文分别从行内元素和块级元素进行说明，将目前比较流行的实现方式进行汇集并解析实现原理，方便大家查阅。这里要说明一点，每一种方式都不是十全十美的，关键要看自己的需求，从而分析出哪种实现方式是最合适的。

行内元素

首先我们先把基础代码写出来：


    我是要居中的行内元素span

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
}

.content {
    background-color: #5b4d4e;
    color: #FFFFFF;
}

class 为 .main 的 div 包裹这一个 class 为 .content 的行内元素 span，我们的目的就是要让 .content 元素 在 .main 元素中居中。

水平居中

text-align

行内元素的水平居中比较简单，我们直接在 .main 中添加 text-align: center; 即可，此时 .main 变为：

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
    
    text-align: center;  /* 水平居中 */
}

实现原理： 设置 text-align 的值为 center ，因为该属性规定元素中的文本的水平对齐方式，那么设置为 center 则文本就水平居中了。

垂直居中

line-height

行内元素的垂直居中我们分为 一行 和 多行或者图片等替换元素 来说明。

如果是 一行，那么我们可以使用 line-height 来实现，此时 .main 元素 css 代码变为：

.main {
    width: 300px;
    height: 300px; /* 可以不设置 */
    background-color: #50ba8b;

    line-height: 300px; /* 垂直居中 */
}

其实设置了 line-height 就可以让文本垂直居中，并不需要同时设置 height，这里也是一直存在的一个误区。

实现原理： 这种方式实现垂直居中运用的是 CSS 中“行距的上下等分机制”，这也说明了为什么该方式只适用于 一行 的文本。

还有一点需要说明是，这种方式实现的垂直居中是“近似”的，并不是完美的垂直居中，因为文字字形的垂直中线位置普遍要比真正的“行框盒子”的垂直中线位置低，而由于我们平时使用的 font-size 比较小，使得这点偏差不容易察觉出来，那么感官上也就看成是垂直居中了。

line-height 及 vertical-align

下面再来说说 多行或者图片等替换元素 的垂直居中效果实现，这里我们需要同时借助 line-height 和 vertical-align 来实现。

先让文本换行：


    
        我是要居中的行内元素span 

        我是要居中的行内元素span
    

再看修改之后的 css 代码：

.main {
    width: 300px;
    background-color: #50ba8b;

    line-height: 300px;
}

.content {
    display: inline-block;
    background-color: #5b4d4e;
    color: #FFFFFF;
    line-height: 20px;
    margin: 0 20px;
    vertical-align: middle;
}

实现原理：

块级元素

依然先把基础代码写出来：


    我是要居中的块级元素div
.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;
}

class 为 .main 的 div 包裹这一个 class 为 .content 的 块级元素 div，我们的目的就是要让 .content 元素 在 .main 元素中居中。

position + margin: auto

实现代码如下：

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
    
    /*关键代码*/
    position: relative;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;

    /*关键代码*/
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

实现原理：

  1. 设置 .main 元素为相对定位 position: relative;，这样其子元素设置绝对定位时就相对它了。

  2. 然后设置 .content 元素为绝对定位 position: absolute; 并设置它的 top、left、bottom、right 都为0，这样该元素的元素的尺寸表现为“格式化宽度和格式化高度”，和

    的“正常流宽度”一样，同属于外部尺寸，也就是尺寸自动填充父级元素的可用尺寸，但由于此时我们设置了 .content 元素的宽高，就限制了元素自动填充，这样就多出来150px的空间了。

  3. 最后我们设置 .content 元素为 margin: auto; ，此时根据 auto 的计算规则，将上下左右剩余空间全部等分了，自然就居中了。

position + margin-left/top

实现代码如下：

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
    
    /*关键代码*/
    position: relative;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;

    /*关键代码*/
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -75px;
    margin-top: -75px;
}

实现原理：

  1. 设置 .main 元素为相对定位 position: relative;，这样其子元素设置绝对定位时就相对它了。

  2. 然后设置 .content 元素为绝对定位 position: absolute; 并设置 top: 50%;、left: 50%;，这样.content 元素的左上角就位于 .main 元素的中心了。

  3. 最后设置 .content 元素 margin-left: -75px;、margin-top: -75px; 将自身左移及上移宽高的一半，这样 .content 元素的中心处于 .main 元素的中心处，自然就实现了居中效果。

  4. 这种方法的缺点就是需要固定 .content 元素的宽高。

position + translate

实现代码如下：

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
    
    /*关键代码*/
    position: relative;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;

    /*关键代码*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

实现原理：

  1. 设置 .main 元素为相对定位 position: relative;，这样其子元素设置绝对定位时就相对它了。

  2. 然后设置 .content 元素为绝对定位 position: absolute; 并设置 top: 50%;、left: 50%;，这样.content 元素的左上角就位于 .main 元素的中心了。

  3. 最后设置 .content 元素 transform: translate(-50%, -50%); 将自身左移及上移宽高的一半，这样 .content 元素的中心处于 .main 元素的中心处，自然就实现了居中效果。

  4. 这种方法的好处就是不需要固定 .content 元素的宽高。

Flexbox

实现代码如下：

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;

    /*关键代码*/
    display: flex;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;

    /*关键代码*/
    margin: auto;
}

实现原理：

Flexbox 的另一个好处在于，它还可以将匿名容器(即没有被标签包裹的文本节点)垂直居中。比如我们不设置 .main 元素为 display: flex;，而是设置 .content 元素为 display: flex;，并借助 Flexbox 规范所引入的 align-items 和 justify-content 属性，我们可以让它内部的文本也实现居中（我们可以对.main 元素使用相同的属性来使 .content 元素元素居中，但比 margin: auto 方法要更加优雅一些，并且同时起到了回退的作用）。

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;

    /*关键代码*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

关于“CSS怎么实现元素居中”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


当前名称：CSS怎么实现元素居中
网站网址：http://cdkjz.cn/article/jddeph.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都网站维护公司传美奇电器郫县明安消防器材服务器租用企业网站制作成都商城网站建设公司广汉锦华橡塑网站建设成都包装盒设计公路打桩机

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图