css 元素居中

AZmake 发布于2019-08-29 17:16 / 659人阅读

摘要：一水平居中行内元素水平居中在父元素上设置使文字图片水平居中。结果如图块级元素的宽高不固定，就不能用负了使用百分比是相对于父元素的宽度。代码结果实现代码设置宽高以显示居中效果弹性布局垂直居中水平居中

一：水平居中 1、行内元素水平居中

在父元素上设置 text-align: center 使文字/图片水平居中。

.container {
  text-align: center;
}

2、块级元素水平居中

先给块级元素设置宽度（不设置宽度，块级元素自己占据一整行，何谈居中）

再给块级元素设置margin：0 auto;（当上下margin不一定是0，可以按照需求来设置）

.container {
  width: 200px;
  margin:  0 auto;
}

二、垂直居中 1、块级元素内部垂直居中

原理：设置块级元素上下padding相等

前提：没有设置高度，高度由内容撑开。块级元素如果设置了高度，就不知道如何设置padding的数值
demo


 
    好好学习
    天天向上

执行结果

2、绝对定位实现垂直居中

（1）demo，
使用前提是块级元素的宽高固定


    我是标题
    我是内容

（2）解析：
使用绝对定位 position: absolute，让dialog起点偏移到页面的中央

通过负margin，偏移dialog宽高的一半，让dialog处于正中。不用relative的原因是已经用了绝对定位了，所以只好用负margin。结果如图

（3）块级元素的宽高不固定，就不能用负margin了（margin使用百分比是相对于父元素的宽度）。我们可以用css3的一个transform的属性，transform是相对自身的宽高来做偏移的。

3、vertical-align实现水平垂直居中

原理：

通过text-align:center 实现水平居中

通过伪元素设置一个内容为空的元素，设置高度为100%，通过vertical-align实现基线对齐。

使用环境：块级元素中设置行内元素水平垂直居中
代码：demo
结果：

遇坑：1、当然使用绝对定位也可以实现这个效果

2、伪元素设置display：block是有问题，需要设置为inline-block

3、使用伪元素是为了减少标签

4、table-cell实现居中

原理：把box设置为表格元素（display: table-cell），通过vertical-align: middle对里面的元素做垂直居中
缺点：把box设置为display: table-cell，box不再是块级元素，如果不设置宽度就会收缩。

代码：demo
结果：

5、display: flex实现

代码：demo


  

.space {
  width: 100vw;
  height: 100vh;  /* 设置宽高以显示居中效果 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
}

body {
  margin: 0;
  background: rgba(0, 0, 0, .95);
}

.earth::after {
  content: "

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

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

CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

cc17 2019-08-02 10:11 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

AlienZHOU 2019-08-30 15:53 评论0 收藏0
【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 评论0 收藏0
【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 评论0 收藏0
css-元素居中

摘要：一水平居中行内元素水平居中使用属性可以实现在行内元素包括在块级父元素水平居中。使用负已知高度宽度使用使用使用三水平垂直居中公共结构块级元素垂直居中。本文重要是汇总了关于水平居中，垂直居中，还有水平垂直居中的各种方法。一、水平居中 1.行内元素水平居中使用text-align:center;属性可以实现在行内元素（包括：inline,inline-block、inline-tabl...

miqt 2019-08-29 18:39 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Apollo 2019-08-30 14:15 评论0 收藏0