资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/对css居中的一点总结

对css居中的一点总结

BenCHou / 1747人阅读

摘要：为了更好的加深对居中的理解，搜集和阅读相关资料，发现不错的文章将其整理出来。

在学习前端的过程中，发现元素和文本的水平居中和垂直居中，是经常会出现的问题，在实际工作中也会经常碰到。居中的技巧有很多，但在编写代码的过程中，发现有时候技巧管用，有时候不管用，于是就将每个知道的方案都试一遍，找到合适的。这种情况究其原因是对居中的认识不够深入，只是停留在实现需求的水平上。为了更好的加深对居中的理解，搜集和阅读相关资料，发现不错的文章将其整理出来。原文参考：https://css-tricks.com/center...

居中是什么

居中故名思意就是将物体放置在其容器的中间，在css中居中就是指元素、文本、图片等相对其容器或父元素或浏览器窗口能够居中显示。而根据显示方式的不同，又分为水平居中，垂直居中，水平垂直居中。下面就分情况对居中进行讨论。

水平居中

水平居中我们常见的一种解决方案就是设置text-align:center，然而我们会发现这种方式有时候有效，有时候却没有效果。这是因为我们在使用相关方法的时候并没有对块级元素和行内元素进行区分，不同类型的元素其居中方法是不同的：

当元素为行内元素时(如文本，链接)

当需要居中的元素为行内元素时，你可以通过在其父元素（必须是块级元素）设置如下css样式：

.parent {
     text-align:center;
}

示例代码
这种方法对display设置为inline、inline-block、inline-table、inline-flex的元素都有效。

块级元素居中

对于一个块级元素你可以通过设置其margin属性，来达到水平居中的效果。你可以将其margin-left和margin-right设置为auto：

.center{
    margin:0 auto;
}

这样浏览器就会根据元素的宽度自动为元素左右两边设定等宽的margin，来达到水平居中的效果。这里需要注意的是元素需要设定width属性，否则元素的宽度会自动充满父元素，就不存在相对父元素水平居中一说了。
示例代码
这里需要注意的是这种方法对设置float属性的块级元素是没有效果的，浮动元素的居中这里有一个解决方案，但是该方法的布局比较混乱，子元素脱出父元素，并不推荐。
另外有一个tricks，能够实现如下图中

文字环绕图片居中的效果，具体参见这篇文章。

当有多个块级元素时

当你需要对多个块级元素进行居中显示时，如果块级元素如下垂直排列：

，那么简单的设置margin:0 auto;就可以轻松实现。
但如果如下排列：

那么就可以使用display:inline-block将多个块元素单行显示，同时由于inline的缘故，可以在父元素设置text-align:center将多个块元素居中，当然也可以将元素设置为display:flex; justify-content: center;达到居中效果。详细代码示例

垂直居中

垂直居中相比于水平居中，就复杂一些，还是分块级与行内进行讨论。

inline或inline-block元素 单行垂直居中的情况

当父元素没有设定宽度，而是根据内容自适应时，简单的设置padding就可以达到垂直居中的效果，如：

css:
.p{ border: 1px solid yellow;padding: 80px;}
.p a{
            background-color: black;
            color: white;
            border: 2px solid red;
            padding: 30px;  /*相同的上下内距实现垂直居中*/
        }
html:


        asldkjflkadfk

在某些情况下设置padding并不能满足需求，而你又需要将一段单行显示的文本居中，这时你可以将line-height和height属性设置为等高来达到目的：

html:

I"m a centered line.

css:
main {
  background: white;
  margin: 20px 0;
  padding: 40px;
}
main div {
  background: black;
  color: white;
  height: 100px;   /*行高与line-height相同*/
  line-height: 100px;
  padding: 20px;
  width: 50%;
  white-space: nowrap;
}

示例代码
关于line-height，有许多需要了解和注意的地方，想详细了解为什么这么这种方法可以实现垂直居中，可以参见这篇文章

多行垂直居中

设置padding同样可以使多行文本居中，但有时当文本出现在表格单元格里或其他情况也会使该方法无效。这时会用到vertical-align属性，
示例代码
更多关于vertical—align的信息，可以点击这里和这篇
需要指出的是只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用

如果table—like不行，也许你可以试一下flex-parent, 一个flex-child可以很轻易的在flex-parent里垂直居中：

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

示例代码
需要注意的是父容器必须有一个固定的高度。
如果上述2中方法都不可行，你就需要借助伪元素，也就是在父容器里添加一个高度占满整个父元素的伪元素，文本就居中显示在里面。

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

完整示例

块级元素垂直居中 当你知道元素的高度时

如果你知道元素的高度，那么你可以这样实现垂直居中：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */  /*这里可以使用transform：translate(-50%)实现同样的效果*/
}

上述代码是通过定位的方式，来实现垂直居中，子元素参照父元素进行绝对定位，相对于父元素的上边缘向下移动50%（父元素高度的50%），然后通过margin-top元素将子元素向上拉自身的50%，达到最终的居中。
完整示例代码

当元素的高度未知时

当元素高度未知时可以如下，本质原理与上述相似：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

完整代码

使用flexbox

使用flexbox无疑是种简单有效的解决方案：

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

完整代码

既水平居中又垂直居中

你可以将上述方法进行合理的组合，来达到水平垂直居中，总结一下，可分为如下三种情况：

元素是否具有固定的宽高

在通过将元素定位50%/50%后，再设置一个高度和宽度一半大小的负值给 margin，能够很好的居中，并且支持大多数浏览器：

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

完整代码

当宽高未知时

当你不知道宽高时，你可以使用transform属性，设置translate(-50%)，这里的50%是相对与元素本身的宽高。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

完整代码

使用flexbox

想要水平垂直居中，你需要设置两个居中属性

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

完整代码

相关文章：
https://css-tricks.com/float-...

http://www.zhangxinxu.com/wor...

居中代码生成工具：http://howtocenterincss.com/

私有云 服务器托管 html居中css 浏览器对和css3的支持 人工智能的一天 js求和表的一列数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111553.html

相关文章

  • css--布局

    摘要：布局方式布局的传统解决方案，基于盒状模型，依赖属性属性属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。关于布局，当然肯定还有更多的更好的方法。 接触前端开发也有半年了，每当需要将一个空白的纸，画成一个页面的时候，总会出现不知所措的几秒钟。除了因为对css中的各种属性的不熟练之外，更难为人的是怎么简练的将这些属性排列组合起来。其实静下心来，仔细想一想，无非就是整体-->局...

    Nino 评论0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

    Hydrogen 评论0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

    xiaolinbang 评论0 收藏0

  • css3总结之居中

    摘要：居中在前端布局上很常见，也很常用，也是最基本的技巧。居中效果在方向控制上基本可以分解成水平居中，垂直居中和水平垂直居中。针对调整的元素不同，具体的处理方式上有些差异。这里我们先不讲绝对定位下的居中，绝对定位下的居中方法很多，变化也多。　　居中在前端布局上很常见，也很常用，也是最基本的技巧。居中效果在方向控制上基本可以分解成水平居中，垂直居中和水平垂直居中。 　　针对调整的元素不同，具体的处理...

    mist14 评论0 收藏0

  • CSS用法的一些总结

    摘要：黄金档未垂直对齐同一行的一组为的使用了或者是时，如果某个的内部标签中填充一些文字等内容，可能就会出现垂直不对齐的情况。解决方法倒不难的应用会被其他一些属性破坏，例如和，所以与或是属性最好不要同用。 工作上，除了Django和一些并不复杂的脚本以外，其余时间写了大量的CSS和jQuery，现在回头看之前的一些代码，写得十分丑陋又低效，其中的CSS就有很大改进空间。正如多数人的认知一样，H...

    Anchorer 评论0 收藏0

发表评论

登陆后可评论

0条评论

BenCHou

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<