玩转 css 居中

snowell 发布于2019-08-29 10:55 / 3422人阅读

摘要：文字居中文字的水平居中对于非元素内的文字水平居中都可以通过完成。也可以设置文字单行的垂直居中这种场景通常在修正框光标和文字的位置。文字单行的相对居中例如图中的状况，需要文字相对于图片的垂直居中，通过对图片设置即可。

文字居中 文字的水平居中

对于非 inline 元素内的文字水平居中都可以通过 text-align: center; 完成。

也可以设置 margin: 0 auto;

文字（单行）的垂直居中

这种场景通常在修正 input 框光标和文字的位置。设置 line-height 的值等于 height 即可。

文字（单行）的相对居中

/Users/alex/Desktop/24319F76-DE76-4A5A-840D-8EC7C0C43882.png
例如图中的状况，需要文字相对于图片的垂直居中，通过对图片设置vertical-align: middle;即可。vertical-align 其实可以完成多种相对对其，例如 top,baseline 等等。

元素居中 内部元素的宽高已知

本方法应该是用的非常多的了，直接看代码吧

.outer {
    width: 100%;
      height: 500px;
    position: relative;
}
.inner {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  background-color: blue;
}

上面方法在 css 中加入 calc 之后可以做如下优化（安卓 4.3 以上，IE9＋）

.outer {
  width: 100%;
  height: 500px;
  position: relative;
}
.inner {
  position: absolute;
  width: 200px;
  height: 200px;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
  background-color: blue;
}

外部元素的高度已知

html:


  
    asjdhajshdkjhakjdshk
    sdalskjdkajls

table 搭配 table-cell 的方法

.outer {
  width: 100%;
  height: 300px;
  display: table;
  text-align: center;
}
.inner {
  display: table-cell;
  vertical-align: middle;
}

translate 方法（IE9 以上）

.outer {
  width: 100%;
  height: 500px;
  position: relative;
}
.inner {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
}

flex 方法
该方法就非常简单了，只需要设置 outer

.outer {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

内外元素高度均已知

html 模版沿用上面

.outer {
  width: 100%;
  height: 500px;
  position: relative;
  text-align: center;
}
.inner {
  height: 100px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

我相信本文绝对不是最全的 css 居中方式，希望各位大神们补充起来。

云服务器 GPU云服务器 html居中css 玩转linux 玩转vps 玩转ubuntu

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

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

查漏补缺 - 收藏集 - 掘金

摘要：酝酿许久之后，笔者准备接下来撰写前端面试题系列文章，内容涵盖浏览器框架分钟搞定常用基础知识前端掘金基础智商划重点在实际开发中，已经非常普及了。这道题--致敬各位10年阿里的前端开发 - 掘金很巧合，我在认识了两位同是10年工作经验的阿里前端开发小伙伴，不但要向前辈学习，我有时候还会选择另一种方法逗逗他们，拿了网上一道经典面试题，可能我连去阿里面试的机会都没有，但是我感受到了一次面试1...

YuboonaZhang 2019-08-29 12:56 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
带你玩转css3的3D！

摘要：透视即是以现实的视角来看屏幕上的事物，从而展现的效果。旋转则不再是平面上的旋转，而是三维坐标系的旋转，就包括轴，轴，轴旋转。必须与属性一同使用，而且只影响转换元素。可自由转载引用，但需署名作者且注明文章出处。 showImg(https://segmentfault.com/img/bVzJoZ); 话不多说，先上demo 酷炫css3走马灯/正方体动画： https://bupt-...

Panda 2019-08-29 11:03 评论0 收藏0
带你玩转css3的3D！

摘要：透视即是以现实的视角来看屏幕上的事物，从而展现的效果。旋转则不再是平面上的旋转，而是三维坐标系的旋转，就包括轴，轴，轴旋转。必须与属性一同使用，而且只影响转换元素。可自由转载引用，但需署名作者且注明文章出处。 showImg(https://segmentfault.com/img/bVzJoZ); 话不多说，先上demo 酷炫css3走马灯/正方体动画： https://bupt-...

archieyang 2019-08-01 15:32 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0