文档章节

元素居中的那些事儿

senola
 senola
发布于 2015/03/19 16:05
字数 1111
阅读 15
收藏 0

原文:<a href="http://senola.github.io/blog/2015/03/10/the-ways-of-center-element/" target="_blank">http://senola.github.io/blog/2015/03/10/the-ways-of-center-element/</a>

关于元素居中的问题一直都是css中抱怨的典范。小伙伴们常常抱怨为什么居个中这么难~ 为了能居中,拼了!!!!!

为了更更好的居中,特地总结了一下居中的方法,方便以后使用。

不要左,不要右,我就要居中!!

一、水平居中(horizontally)

(1)inline、inline-*元素(如文本,超链接等)的水平居中

我们知道,行内元素所占的空间是与元素本身大小相关的。 若要水平居中一个行内元素,只需要用一个块级元素包含它即可:

  .center-child {
    text-align: center;
  }

demo:

<p data-height="295" data-theme-id="12976" data-slug-hash="pvOVyq" data-default-tab="result" data-user="senola" class='codepen'>See the Pen <a href='http://codepen.io/senola/pen/pvOVyq/'>行内元素居中</a> by senola (<a href='http://codepen.io/senola'>@senola</a>) on <a href='http://codepen.io'>CodePen</a>.</p>

次方法适用于inlineinline-blockinline-tableinline-fex等行内元素

(2)块级元素水平的居中

众所周知,块级元素霸道,它会独占一行。所有我们可以使用margin-leftmargin-right的值为auto来居中块级元素(注意,需要给块级元素一个宽度,因为如果不给块级元素一个宽度那么该元素将充满整个屏幕,就不需要居中了)。

 .block-center {
   margin:0 auto;
 }

demo:

<p data-height="268" data-theme-id="12976" data-slug-hash="vEzjxZ" data-default-tab="result" data-user="senola" class='codepen'>See the Pen <a href='http://codepen.io/senola/pen/vEzjxZ/'>块级元素居中</a> by senola (<a href='http://codepen.io/senola'>@senola</a>) on <a href='http://codepen.io'>CodePen</a>.</p>

此方法适用于任何宽度的块级元素。不要太爽!

(3)多个块级元素水平居中

假如需要使一个以上的块级元素水平居中,有两种方法:

方法一: 使用inline-block。方法二: 使用flex-box。 如下:

<p data-height="424" data-theme-id="12976" data-slug-hash="RNYyLL" data-default-tab="result" data-user="senola" class='codepen'>See the Pen <a href='http://codepen.io/senola/pen/RNYyLL/'>RNYyLL</a> by senola (<a href='http://codepen.io/senola'>@senola</a>) on <a href='http://codepen.io'>CodePen</a>.</p> <script async src="//assets.codepen.io/assets/embed/ei.js"></script>

其实,水平居中很简单。留意一下行内元素和块级元素的不同就行~ 接下来整整垂直居中!

二、垂直居中(Vertical)

垂直居中需要一些css技巧。

(1)inline、inline-*元素(如文本,超链接等)的垂直居中

1. 单行垂直居中

有时候inlinetext元素会默认垂直居中,这是因为元素的padding-toppadding-bottom值相等。

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

如果再一些情况下,padding不方便使用,那么可以设置textline-height值为text的高度。

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

<p data-height="400" data-theme-id="12976" data-slug-hash="xbaMQj" data-default-tab="result" data-user="senola" class='codepen'>See the Pen <a href='http://codepen.io/senola/pen/xbaMQj/'>行内元素单行垂直居中</a> by senola (<a href='http://codepen.io/senola'>@senola</a>) on <a href='http://codepen.io'>CodePen</a>.</p>

2. 多行行垂直居中

设置元素的padding-toppadding-bottom相等也可以是多行文本垂直居中。但这不是通用的方法,也许文本元素是在表格的单元格中,又或者是用了css让其行为类似表格。这时候可以使用vertical-align就可以帮助设置元素垂直居中。

下面介绍一种很有意思的方法,该方法被称为ghost element技术,顾名思义,ghost诡异的。该技术中采用了伪元素,来看看吧~ 保证不打死你!!!

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

<p data-height="400" data-theme-id="12976" data-slug-hash="ogPVXV" data-default-tab="result" data-user="senola" class='codepen'>See the Pen <a href='http://codepen.io/senola/pen/ogPVXV/'>ghost element technique</a> by senola (<a href='http://codepen.io/senola'>@senola</a>) on <a href='http://codepen.io'>CodePen</a>.</p>

(2)会计元素的垂直居中

1. 知道元素的高度

如果知道块级元素的高度,你可以这样做:

	.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; */
	}
2. 不知道元素的高度

如果不知道元素的高度,那么可以采用transform变换。

	.parent {
	  position: relative;
	}
	.child {
	  position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	}
3. 采用flexbox
	.parent {
	  display: flex;
	  display: -webkit-flex;
	  flex-direction: column;
	  justify-content: center;
	}

三、水平和垂直居中

当然你可以结合以上方法来使元素垂直水平居中。对于水平、垂直同时居中的话我们可以分三种情况:

1. 元素有固定的狂高度

可以采用元素的宽高值得一半并取负值作为margin的值,同时采用绝对定位。这种方法各浏览器都有良好的支持。

    .parent {
	  position: relative;
	}
	
	.child {
	  width: 300px;
	  height: 100px;
	  padding: 20px;
	
	  position: absolute;
	  top: 50%;
	  left: 50%;
	
	  margin: -70px 0 0 -170px;
	}

2. 元素没有固定的狂高度

如果元素没有固定的宽度和高度,那么我们可以采用transform绝对定位实现。

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

也可以设置leftrighttopbottom值为0,再设置marginauto

	.parent {
	  position: relative;
	}
	.child {
	  position: absolute;
	  top: 0;
	  left: 0;
	  top: 0;
      bottom: 0;
	  margin: auto;
	}
3. 使用flexbox
	.parent {
	  display: flex;
	  display: -webkit-flex;
	  justify-content: center;
	  align-items: center;
	}

四、总结

通过以上方法,你可以居中任何元素。妈妈再也不用担心我不会居中喽 O(∩_∩)O~

© 著作权归作者所有

senola
粉丝 2
博文 3
码字总数 1132
作品 0
深圳
程序员
私信 提问
「前端那些事儿」③ CSS 布局方案

我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案 话不多说,上代码! 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1、水平居中 a) inline-block + text-ali...

zwwill木羽
2018/10/30
0
0
元素居中的N种方式

水平居中 <1>行内元素的居中 被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。 <2>块状元素的居中 当被设置元素为 块状元素 时用 text-align...

_YM雨蒙
2017/08/16
0
0
学习CSS你必须踩得那些坑(六)

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

博为峰教研组
2016/12/26
3
0
《css 揭秘》 之垂直居中的实现

最近看了 Lea Verou 的 《css揭秘》一书,让我对自己的 css学习产生了深深的怀疑。这本书真是太棒了,里面涉及到很多优雅又有趣的效果实现,真的是非常棒。如果你有时间,十分建议你去看看。...

IrisHuang
04/23
0
0
vertical-align属性与垂直居中

让元素居中对齐是非常常见的需求,首先是水平居中,要实现水平居中行内元素只需要在其父元素上设置即可,对于块级元素来说让它的和即可(width不可为auto),那么垂直居中呢?找下css属性发现...

leozdgao
2015/05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker搭建Mysql集群、主从同步复制

1、创建数据挂载点: mkdir /opt/mysql-master/mysql、/opt/mysql-master/conf.d、/opt/mysql-slave/conf.d、/opt/mysql-slave/conf.d 2、分别在master、slave节点文件目录conf.d下创建touch......

WALK_MAN
14分钟前
0
0
手把手教你做中间件开发(分布式缓存篇)-借助redis已有的网络相关.c和.h文件,半小时快速实现一个epoll异步网络框架,程序demo

本文档配合主要对如下demo进行配合说明: 借助redis已有的网络相关.c和.h文件,半小时快速实现一个epoll异步网络框架,程序demo 0. 手把手教你做中间件、高性能服务器、分布式存储技术交流群 ...

y123456yz
15分钟前
0
0
阿里技术男的成长史:越想证明自己死得越快……

在上海工作8年后,身为部门经理的钱磊,管理着一家ERP公司的百十来号员工,“再往上爬就是老板和他儿子了……从这个领域的技术角度来讲算是做到了顶。”05年,钱磊就开始关注一家名字奇怪,做...

阿里云云栖社区
19分钟前
1
0
Spring-boot单元测试(私有方法测试)

Spring-boot的单元测试网上有了很多,当项目是可以使用spring-boot正常运行时,只要在测试类上添加如下配置就使用@Autowired的方式进行单元测试 @RunWith(SpringJUnit4ClassRunner.class)@...

琴兽
36分钟前
0
0
spring cloud(第一部)框架概述

关于微服务 近几年,'微服务'这个词越来越多的被身边的人所提及,到底什么是微服务,为什么微服务总是伴随着spring cloud被人们所提及,这里笔者结合多年的技术经历跟大家分享下自己的理解:...

白中墨
36分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部