文档章节

CSS居中指南

相思树下说相思
 相思树下说相思
发布于 2017/03/06 19:14
字数 1440
阅读 14
收藏 0

水平

inline或inline-*元素(如文本或链接)

你可以在block父元素中水平居中内联元素:


.parent{
  text-align: center;
}

例子

适用于inline, inline-block, inline-table, inline-flex等。

block元素

可以给这个block元素margin-left和margin-right属性定义auto(需要定义width,否则它会充满父元素,无法实现对齐):

.center-me {
  margin: 0 auto;
}

例子

无论什么宽度的block元素都会以父元素为中心。

注意,浮动可以左浮动、右浮动,但你不能居中浮动“float:center”。

用伪元素伪造“float:center”

image

如果我们想要得到这种布局,这不是特别容易做到的,目前的布局方法没有真正的建立在这一点上。

这有点像float文字包围图像,但是文本包含这两个方向,有点像不存在的“float:center”或“float:both”。

我们可以通过浮动的伪元素占位符做到这点。可以在文本中分本放一个左浮动,一个有浮动,伪元素的高宽由要插入的图像决定。

#l:before, #r:before { 
  content: ""; 
  width: 125px; 
  height: 250px; 
}
#l:before { 
  float: right; 
}
#r:before { 
  float: left; 
}

image

此时文本中多了一个区域,我们只要对图片进行绝对定位即可完成。也可以讲图片放到文本上放,居中后使用负的margin-top拉到对应位置上。

例子

是否有多个block元素?

如果你有两个或多个块级元素需要在一行中水平居中。这里有一个例子inline-block和一个flexbox的例子:

//inline-block例子
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;//让子元素有宽度高度特性又具有inline的同行特性
  text-align: left;
} 
//inline-blick如果他们高度不一,会以最高的块底部对齐。


flexbox例子
.flex-center {
  display: flex;
  justify-content: center;
}

例子
block,inline和inlinke-block 这篇文章有一句错了,正确的是inline元素的margin和padding属性竖直方向也都是有效的。 Flex他是未来布局的首选,因为他不支持IE10以下等游览器。
Flex 布局教程:语法篇
Flex 布局教程:实例篇

多个块级别元素堆叠在彼此的顶部:

margin: 5px auto;

注意设置宽度
例子

垂直

垂直居中在CSS中有点棘手。

它是inline或者inline-*元素(如文本或链接)吗?

是单行吗?

有时,inline / text元素可能显示为垂直居中,只是因为它们之上和之下有相等的填充。

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

例子

如果padding由于某种原因不是一个选项,并且你试图集中一些你知道不会包装的文本,有一个技巧是使文本line-height的高度相等center。

.center-text-trick {
  height: 100px;
  line-height: 100px;
}

讲行高和放置文本的高度一样,就能实现垂直居中。
例子

是多行吗?

顶部和底部的相等填充也可以为多行文本提供垂直居中效果,但是如果这不起作用,也许文本所在的元素可以是表单元格,或者字面上还是表现得像一个CSS。在这种情况下,用vertical-align属性处理,不像它通常是连续处理元素的对齐。(更多。)

vertical-align: middle;

例子

也许你可以使用flexbox?单个flex-child可以很容易地在flex-parent中居中。

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

例子
请记住,只有父容器有固定高度(px,%等),这才是真正相关的,这就是为什么这里的容器有一个高度。

如果这两种技术都出来了,你可以使用“ghost element”技术,其中一个全高度的伪元素被放置在容器内,文本与它垂直对齐。

.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;
}

例子

它是block元素吗?

你知道元素的高度吗?

这是很常见的不知道网页布局中的高度,有很多原因:如果宽度改变,文本回流可以改变高度。文本样式中的方差可以更改高度。文本量的变化可以改变高度。具有固定宽高比的元素(如图像)可以在调整大小时更改高度。等等。

但如果你知道的高度,你可以垂直中心像:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 如果不使用 box-sizing: border-box; 说明 padding 和 border*/
}

例子 知道高度了,通过margin-top进行微调垂直居中。

你未知元素的高度吗?

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

例子 逻辑是砍了父元素一半,在砍自己一半实现居中。

可以使用flexbox吗?

这在flexbox中容易多了。

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

例子 两个微妙的属性,旋转盒子+水平居中。还可以用

display: flex;
align-items: 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属性和向中心的两个方向(基于元素的当前宽度/高度)的50%的负向平移:

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

例子

你可以使用flexbox吗?

要使用flexbox在两个方向居中,您需要使用两个居中属性:

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

例子

结论

你可以在CSS中完全居中所有的东西。

© 著作权归作者所有

共有 人打赏支持
相思树下说相思
粉丝 0
博文 2
码字总数 1845
作品 0
南京
程序员
私信 提问
学习CSS你必须踩得那些坑(六)

这里加了边框方便调试: · 为了能够设置在垂直方向上的高度(padding-top/bottom, margin-top/bottom, height):我们设置行内元素<a> display为inline-block 行内元素是就像水一样,垂直方向...

博为峰教研组
2016/12/26
3
0
一些CSS方面的知识

1.学习CSS"盒子模型"(上):http://www.108js.com/article/article8/80058.html?id=1766 2.学习CSS"盒子模型"(下):http://www.108js.com/article/article8/80059.html?id=1767 3.css知多......

IT追寻者
2016/06/23
31
0
[译文]CSS的水平/垂直居中:一篇完整的指南

原文:Centering in CSS: A Complete Guide 在CSS中居中是(开发者)抱怨CSS设计的代表问题之一。有人嘲笑说:这有什么困难的呢?我认为,难度不在于解决问题,而在于有如此多的不同解决方法...

huangpin815
2017/09/26
0
0
16种方法实现水平居中垂直居中

熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题. 水平居中 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 若是块级元素...

tomzhangto
2017/12/19
0
0
CSS实现水平垂直居中的10种方式(史上最全)

划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居中的方式大概有下面这些,本文将...

颜海镜
2018/09/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IOS  学习记录

1.StackView=>IOS 9及以上支持 2.布局方式: AutoLayout / StackView 堆布局 (线性布局) 3.屏幕适配 (资源分辨率、设计分辨率、屏幕分辨率) Size Class技术 可以针对 屏幕的方向进行设置...

萨x姆
今天
4
0
第四次工业革命:自主经济的崛起

https://36kr.com/p/5170370.html

shengjuntu
昨天
3
0
Cloud Native 与12-Factor

12-Factor(twelve-factor),也称为“十二要素”,是一套流行的应用程序开发原则。Cloud Native架构中使用12-Factor作为设计准则。 12-Factor 的目标在于: 使用标准化流程自动配置,从而使...

waylau
昨天
9
0
java多线程2

“非线程安全”问题存在于“实例变量”中,如果是方法内部的私有变量,则不存在线程安全问题。这是因为方法内部的变量都是私有造成的。 synchronized 获取的都是对象锁。如果多个线程访问多个...

一滴水穿石
昨天
4
0
今天的学习

1,document.location.href:获取整个url 2,str.split(' '):用字符分割字符串 3,$this->load->library(' '):引用图像处理类 4,$this->load->library(' '):引用Email类 5,特殊访问指针$th......

墨冥
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部