效果居中的11种方法

今天主要谈一谈CSS中的各种居中的办法。
首先是水平居中,最简单的办法当然就是

CSS垂直居中的11种实现方式

复制代码 代码如下:margin:0 auto;

 

也就是将margin-left和margin-right属性设置为auto,从而达到水平居中的效果。

11种实现方式分别如下:

那么其他的办法呢?容我一一道来:

  1. 使用绝对定位和负外边距对块级元素进行垂直居中

line-height

html代码:

首先介绍文字的水平居中方法:

<div id=”box”>
<div id=”child”>我是测试DIV</div>
</div>

复制代码 代码如下:div 刘放/div

css代码:

利用line-height设为height的一样即可:

复制代码
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
width: 150px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
margin: -50px 0 0 0;
line-height: 100px;
}

复制代码 代码如下:.wrap{ line-height:
200px;/*垂直居中关键*/ text-align:center;

复制代码

height: 200px; font-size: 36px; background-color: #ccc;}

运行结果如下:

效果如下:

 

padding填充

  这个方法兼容性不错,但是有一个小缺点:必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中。

利用padding和background-clip配合实现div的水平垂直居中:

 

复制代码 代码如下:div div /div/div

  1. 使用绝对定位和transform

通过backgroun-clip设置为content-box,将背景裁剪到内容区外沿,再利用padding设为外div减去内div的差的一半,来实现:

html代码:

.parent{ margin:0 auto; width:200px; height:200px; background-color:red;}.children { width: 100px; height: 100px; padding: 50px; background-color: black; background-clip:content-box;/*居中的关键*/

<div id=”child”>
我是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本
</div>

效果如下:

css代码:

margin填充

复制代码
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
background: #93BC49;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}

接下来介绍margin填充的方式来实现水平垂直居中。 首先我们还是定义父子div:

复制代码

div div /div/div

运行结果如下:

这里我们利用将子div的margin-top设置为父div高度减去子div高度的一半,然后再通过overflow设置为hidden来触发父div的BFC,LESS代码如下:

 

@parentWidth:200px;@childrenWidth:50px;.parent { margin:0 auto; height:@parentWidth; width:@parentWidth; background: red; overflow:hidden;/*触发BFC*/}.children { height:@childrenWidth; width:@childrenWidth; margin-left:auto; margin-right:auto; margin-top: (@parentWidth - @childrenWidth) / 2; background:black;}

  这种方法有一个非常明显的好处就是不必提前知道被居中元素的尺寸了,因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。

最后得到居中效果如下:

 

absolute定位

  1. 另外一种使用绝对定位和负外边距进行垂直居中的方式

利用position:absolute搭配top,left
50%,再将margin设为负值也可以对div进行水平垂直居中,首先还是需要定义父子div:

html代码:

复制代码 代码如下:div div /div/div

<div id=”box”>
<div id=”child”>我也是个测试DIV</div>
</div>

然后设置相应的css:

css代码:

.parent { position:relative; margin:0 auto; width:200px; height:200px; background-color:red;}.children { position:absolute; left:50%; top:50%; margin:-25px 0 0 -25px ; height:50px; width:50px; background-color: black;}

复制代码
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
  width: 50%;
height: 30%;
background: pink;
position: absolute;
top: 50%;
margin: -15% 0 0 0;
}

其中的margin中的值为该div宽度的一半,最后效果图:

复制代码

text-align居中

运行结果如下:

众所周知,text-align可以使得一个div中的内容水平居中。但是如果是要将该div中的子div居中呢?可以将子div的display设为inline-block。

 

.parent { text-align:center; margin:0 auto; width:200px; height:200px; background:red;}.children { positiona;absolute; margin-top:75px; width:50px; height:50px; background: black; display:inline-block;/*使其父元素text-align生效*/}

  这种方式的原理实质上和前两种相同。补充的一点是:margin的取值也可以是百分比,这时这个值规定了该元素基于父元素尺寸的百分比,可以根据实际的使用场景来决定是用具体的数值还是用百分比。

图片居中

 

一般的图片居中都是和text-align一样,将图片包装在一个div中,将该div的text-align设为center即可。
可以参考下面的链接: 个人站点

  1. 绝对定位结合margin: auto

有一种特殊的方式,利用了一个图片进行占位,以让父容器获得高宽,从而让进行-50%偏移的图片能有一个参照容器作百分比计算。优点是可以不知道图片的大小,随便放张尺寸不超过父容器的图片上去都能做到居中。另外,兼容性好,IE6都是能顺利兼容的。代码如下:

html代码:

复制代码 代码如下:div p img src=”” alt=””
/ img src=”” alt=”” //p/div

<div id=”box”>
<div id=”child”>呆呆今天退役了(。﹏。)</div>
</div>

.parent { position:relative; width:100%; height:200px; background:red;}p { position:absolute; top:50%; left:50%;}.hidden-img { visibility:hidden;}.show-img { position:absolute; right:50%; bottom:50%;}

css代码:

效果如下:

复制代码
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
width: 200px;
height: 100px;
background: #A1CCFE;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
line-height: 100px;
}

transform居中

复制代码

上面讲到的div居中的例子中,div的宽度都是固定的,然而实际项目中,有可能遇到不定宽的div,特别是响应式或者移动端的设计中,更加常见。所以下面介绍一种不需要定宽的div水平垂直居中方法。
先上代码:

运行结果如下:

复制代码 代码如下:div div div
我是水平垂直居中噢!/div /div/div

 

.parent { float: left; width: 100%; height: 200px; background-color: red;}.children { float:left; position:relative; top:50%; left:50%;}.children-inline { position: relative; left: -50%; -webkit-transform : translate3d(0, -50%, 0); transform : translate3d(0, -50%, 0); background-color: black; color:white;}

  这种实现方式的两个核心是:把要垂直居中的元素相对于父元素绝对定位,top和bottom设为相等的值,我这里设成了0,当然你也可以设为99999px或者-99999px无论什么,只要两者相等就行,这一步做完之后再将要居中元素的margin设为auto,这样便可以实现垂直居中了。

效果如下:

  被居中元素的宽高也可以不设置,但不设置的话就必须是图片这种自身就包含尺寸的元素,否则无法实现。

首先我们利用float,将需要居中的div的父div也就是children的宽度收缩,然后left:50%,将children的左边与水平中线对齐。这个时候,还没有真正居中,我们需要将children-inner左移动-50%,这样就水平居中了。
再来说说垂直方向,先将children的top设为50%,然后其上边和垂直中线对齐了,同样,我们需要将children-inner上移动-50%。但是这个50%是计算不出来的,所以我们用到了transform
: translate3d(0, -50%, 0); 这个方法非常好用噢。

 

flex居中

  1. 使用padding实现子元素的垂直居中

最后来介绍一下CSS3中的display:flex来实现的水平垂直居中的方法。

html代码:

复制代码 代码如下:div div
我是通过flex的水平垂直居中噢!/div/div

<div id=”box”>
<div
id=”child”>今天西安的霾严重的吓人,刚看了一眼PM2.5是422</div>
</div>

html,body{ width: 100%; height: 200px;}.parent { display:flex; align-items: center;/*垂直居中*/ justify-content: center;/*水平居中*/ width:100%; height:100%; background-color:red;}.children { background-color:blue;}

css代码:

效果如下:

复制代码
#box {
width: 300px;
background: #ddd;
padding: 100px 0;
}
#child {
width: 200px;
height: 100px;
background: #澳门新葡亰平台官网,F7A750;
line-height: 50px;
}

这种方式最为简便,就是兼容性不好,不过随着时间的前进,各大浏览器一定会都兼容的。

复制代码

以上就是本文的全部内容,希望大家可以喜欢。

运行结果如下:

 

  这种实现方式非常简单,就是给父元素设置相等的上下内边距,则子元素自然是垂直居中的,当然这时候父元素是不能设置高度的,要让它自动被填充起来,除非设置了一个正好等于上内边距+子元素高度+下内边距的值,否则无法精确的垂直居中。

  这种方式看似没有什么技术含量,但其实在某些场景下也是非常好用的。

 

  1. 设置第三方基准

html代码:

<div id=”box”>
<div id=”base”></div>
<div
id=”child”>今天写了第一篇博客,希望可以坚持写下去!</div>
</div>

css代码:

复制代码
#box {
width: 300px;
height: 300px;
background: #ddd;
}
#base {
height: 50%;
background: #AF9BD3;
}
#child {
height: 100px;
background: rgba(131, 224, 245, 0.6);
line-height: 50px;
margin-top: -50px;
}

复制代码

运行结果如下:

 

  这种方式也非常简单,首先设置一个高度等于父元素高度一半的第三方基准元素,那么此时该基准元素的底边线自然就是父元素纵向上的中分线,做完这些之后再给要垂直居中的元素设置一个margin-top,值的大小是它自身高度的一半取负,则实现垂直居中。

 

  1. 使用flex布局

html代码:

<div id=”box”>雾霾天气,太久没有打球了</div>

css代码:

复制代码
#box {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
align-items: center;
}

复制代码

运行结果如下:

 

这种方式同样适用于块级元素:

html代码:

<div id=”box”>
<div id=”child”>
程序员怎么才能保护好眼睛?
</div>
</div>

css代码:

复制代码
#box {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
align-items: center;
}
#child {
width: 300px;
height: 100px;
background: #8194AA;
line-height: 100px;
}

复制代码

运行结果如下:

 

  flex布局(弹性布局/伸缩布局)里门道颇多,这里先针对用到的东西简单说一下,想深入学习的小伙伴可以去看阮一峰老师的博客。(

  flex也就是flexible,意为灵活的、柔韧的、易弯曲的。

  元素可以通过设置display:flex;将其指定为flex布局的容器,指定好了容器之后再为其添加align-items属性,该属性定义项目在交叉轴(这里是纵向轴)上的对齐方式,可能的取值有五个,分别如下:

  flex-start::交叉轴的起点对齐;
  flex-end:交叉轴的终点对齐;

  center:交叉轴的中点对齐;

  baseline:项目第一行文字的基线对齐;

  stretch(该值是默认值):如果项目没有设置高度或者设为了auto,那么将占满整个容器的高度。

 

  1. 第二种使用弹性布局的方式

html代码:

<div id=”box”>
<div id=”child”>
答案当然是多用绿色的背景哈哈
</div>
</div>

css代码:

复制代码
#box {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
flex-direction: column;
justify-content: center;
}
#child {
width: 300px;
height: 100px;
background: #08BC67;
line-height: 100px;
}

复制代码

运行结果如下:

 

  这种方式也是首先给父元素设置display:flex,设置好之后改变主轴的方向flex-direction:
column,该属性可能的取值有四个,分别如下:

  row(该值为默认值):主轴为水平方向,起点在左端;

  row-reverse:主轴为水平方向,起点在右端;

  column:主轴为垂直方向,起点在上沿;

  column-reverse:主轴为垂直方向,起点在下沿。

  

  justify-content属性定义了项目在主轴上的对齐方式,可能的取值有五个,分别如下(不过具体的对齐方式与主轴的方向有关,以下的值都是假设主轴为从左到右的):

  flex-start(该值是默认值):左对齐;

  flex-end:右对齐;

  center:居中对齐;

  space-between:两端对齐,各个项目之间的间隔均相等;

  space-around:各个项目两侧的间隔相等。

 

  1. 还有一种在前面已经见到过很多次的方式就是使用 line-height
    对单行文本进行垂直居中

html代码:

<div id=”box”>
我是一段测试文本
</div>

css代码:

复制代码
#box{
width: 300px;
height: 300px;
background: #ddd;
line-height: 300px;
}

复制代码

运行结果如下:

 

  这里有一个小坑需要大家注意:line-height(行高)
的值不能设为100%,我们来看看官方文档中给出的关于line-height取值为百分比时候的描述:基于当前字体尺寸的百分比行间距。所以大家就明白了,这里的百分比并不是相对于父元素尺寸而言,而是相对于字体尺寸来讲的。

 

  1. 使用 line-height 和 vertical-align 对图片进行垂直居中

html代码:

<div id=”box”>
<img src=”duncan.jpeg”>
</div>

css代码:

复制代码
#box{
width: 300px;
height: 300px;
background: #ddd;
line-height: 300px;
}
#box img {
vertical-align: middle;
}

复制代码

运行结果如下:

 

vertical-align并不像看起来那样天真无邪童叟无欺,以后会单独拎出来专门写一篇。

 

  1. 使用 display 和 vertical-align 对容器里的文字进行垂直居中

html代码:

<div id=”box”>
<div id=”child”>我也是一段测试文本</div>
</div>

css代码:

复制代码
#box {
width: 300px;
height: 300px;
background: #ddd;
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}

复制代码

运行结果如下:

 

  这里关于vertical-align啰嗦两句:vertical-align属性只对拥有valign特性的html元素起作用,例如表格元素中的<td><th>等等,而像<div><span>这样的元素是不行的。

  valign属性规定单元格中内容的垂直排列方式,语法:<td
valign=”value”>,value的可能取值有四种:

  top:对内容进行上对齐

  middle:对内容进行居中对齐

  bottom:对内容进行下对齐

  baseline:基线对齐

 

  关于baseline值:基线是一条虚构的线。在一行文本中,大多数字母以基线为基准。baseline
值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom
值相同。不过,如果文本的字号各不相同,那么 baseline 的效果会更好。

 

 

  PS:一个人的力量毕竟有限,所以也难以保证百分之一百的合理性与正确性,如在阅读的过程中发现有描述不当的地方,或者您有更好的实现方式,那么欢迎随时指正,随时留言,笔者不胜感激!

利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align
center,块级元素设置其本身的left 和 right
margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。

Line-Height Method

line height demo
试用:单行文本垂直居中,demo

代码:

html

 

1
2
3

<div id=”parent”>
<div id=”child”>Text here</div>
</div>

..
css

 

1
2
3

#child {
line-height: 200px;
}

..
垂直居中一张图片,代码如下

html

 

1
2
3

<div id=”parent”>
<img src=”image.png” alt=”” />
</div>

..
css

 

1
2
3
4
5
6

#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}

..
CSS Table Method

table cell demo

适用:通用,demo

代码:

html

 

1
2
3

<div id=”parent”>
<div id=”child”>Content here</div>
</div>

..
css

 

1
2
3
4
5

#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}

..
低版本 IE fix bug:

 

1
2
3

#child {
display: inline-block;
}

..
Absolute Positioning and Negative Margin

absolute positioning and negative margin demo

适用:块级元素,demo

代码:

html

 

1
2
3

<div id=”parent”>
<div id=”child”>Content here</div>
</div>

..
css

 

1
2
3
4
5
6
7
8
9

#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}

..
Absolute Positioning and Stretching

absolute positioning and vertical stretching demo

适用:通用,但在IE版本低于7时不能正常工作,demo

代码:

html

 

1
2
3

<div id=”parent”>
<div id=”child”>Content here</div>
</div>

..
css

 

1
2
3
4
5
6
7
8
9
10
11

#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}

..
Equal Top and Bottom Padding

vertical centering with padding demo

适用:通用,demo

代码:

html

 

1
2
3

<div id=”parent”>
<div id=”child”>Content here</div>
</div>

..
css

 

1
2
3
4
5
6

#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}

..
Floater Div

vertical centering with floater div demo

适用:通用,demo

代码:

html

 

1
2
3
4

<div id=”parent”>
<div id=”floater”></div>
<div id=”child”>Content here</div>
</div>

..
css

 

1
2
3
4
5
6
7
8
9
10
11

#parent {height: 250px;}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
clear: both;
height: 100px;
}

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图