div 垂直居中的六种方法

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

Line-Height Method

试用：单行文本垂直居中，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="data:image.png" alt="" />
</div>

css

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

CSS Table Method

适用：通用，demo

代码：

html

1
2
3

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

css

#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

适用：块级元素，demo

代码：

html

1
2
3

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

css

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

Absolute Positioning and Stretching

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

代码：

html

1
2
3

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

css

#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

适用：通用，demo

代码：

html

1
2
3

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

css

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

Floater Div

适用：通用，demo

代码：

html

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

css

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

div 垂直居中的六种方法相关推荐

html整体垂直居中,实现HTML元素垂直居中的六种方法
一. img的垂直水平居中使用到的重要样式属性display,vertical-align vertical-align:middle这个属性是对table元素垂直居中起作用,如果想使用在img元素 ...
div水平垂直居中的六种方法
在平时,我们经常会碰到让一个div框针对某个模块上下左右都居中(水平垂直居中),其实针对这种情况,我们有多种方法实现. 方法一: 绝对定位方法:不确定当前div的宽度和高度,采用 transform: ...
让div水平垂直居中的六种方法
** 方法一:绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;) ...
移动web-使一个盒子水平垂直居中的六种方法
方法一:利用定位(常用) <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
div垂直居中的两种方法
div垂直居中的两种方法表格方法 /* 第一种方法,DIV垂直居中表格方法 */display: table-cell;/*设置成表格单元*/vertical-align:middle;/*垂直 ...
php div中的字上下居中,Div垂直居中效果怎么实现
本篇文章主要给大家介绍实现div垂直方向居中的方法. 网页设计中div各种居中布局,是html/css初学者们最为基础且需要掌握的知识技能.div水平居中效果我们在之前的文章中有为大家介绍过,想必新手 ...
纯css使div垂直居中，div垂直，div居中的方法
首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...
CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
CSS教程:div垂直居中的N种方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
div垂直居中-CSS元素垂直居中方法
div垂直居中-CSS元素垂直居中方法分2类: 1.文本垂直居中的解决方案-2种 https://edu.csdn.net/course/play/9950/211677 2.块级元素垂直居中的解决方 ...

div 垂直居中的六种方法

Line-Height Method

CSS Table Method

Absolute Positioning and Negative Margin

Absolute Positioning and Stretching

Equal Top and Bottom Padding

Floater Div

div 垂直居中的六种方法相关推荐

最新文章

热门文章