利用CSS让元素垂直居中的两种实现方法
简介：利用CSS让元素垂直居中是个很头疼的问题，这里就介绍两种简单实用的方法。
利用CSS让元素垂直居中是个很头疼的问题，这里就介绍两种简单实用的方法方法一：利用行高（line-height）定位line-height通常是用于调节一段文字的行与行之间的距离，或者说两行文字之间的距离，如果行高是500px，那么每一行中的文字距离本行的顶部就是250px，如果将文字的行高设为500px，并且外面的容器的高度也为500px，同样可以实现垂直居中，但是用它来实现垂直居中，也是有缺点的，就是如果内容过多，文字就会跑到下一行，那么内容就不可能垂直居中了。HTML代码：
&h1&Hi, I'm&span&Vertically Aligned&/span& Within the H1&/h1&
margin: 0;
padding: 0;
background: #1d1d1d;
font-size: 10
font-family: Verdana, Arial, Helvetica, sans- } h1 {
font: 3em Georgia, "Times New Roman", Times,
height: 500
line-height: 500
text-align:
border: 10px solid #999; } h1 span {
font-weight:
font-size:1.5
color: #fff000; } p {
font-size: 1.3
color: #999; } strong {
color: # }
方法二：利用绝对定位先来看看效果，查看演示这个方法有个缺点我必须指出，就是外面的块状元素，必须指定高度，所以如果你在里面放动态的内容的话，后果会很糟糕滴~HTML代码：
&div class="vert"&
&h1&Hi, I'm&span&Vertically Aligned&/span&&/h1&
&p&Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis &strong&Using&/strong& augue &strong&absolute&/strong& validus. Regula &strong&positioning&/strong& eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. &/p& &/div&
CSS代码：这种用绝对定位来实现的垂直居中，取决与元素的宽度和高度，你可以用下面这两个公式来元素的左边距和上边距元素的宽度/2 = 负左边距元素的高度/2 = 负上边距在这个例子中，我们就是这么计算的
width: 580
height: 190
left: 50%;
margin: -95px 0 0 -290 }
完整CSS代码
margin: 0;
padding: 0;
background: #1d1d1d;
font-size: 10
font-family: Verdana, Arial, Helvetica, sans- } h1 {
font: 4em Georgia, "Times New Roman", Times,
border-bottom: 5px dotted #999;
margin: 0;
padding: 0 0 10 } h1 span {
font-weight:
font-size:1.5
color: #fff000; } p {
font-size: 1.3
color: #999; } strong {
color: # } .vert {
width: 580
height: 190
left: 50%;
margin: -95px 0 0 -290 }
问题延伸如果元素的外面还有一个父级元素，如果才能让元素垂直居中于父级元素内部？比如下面的代码，多了一个父级元素
&div class="container"&
&div class="vert"&
&h1&Hi, I'm Nested &&span&Vertically Aligned&/span&&/h1&
&p&Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis &strong&Using&/strong& augue &strong&absolute&/strong& validus. Regula &strong&positioning&/strong& eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. &/p&
&/div& &/div&
这时候，就必须在定义父级元素的CSS代码中加入position:才能够使内部元素垂直居中于父级内部，代码如下：
.container {
height: 500
width: 800
border: 10px solid #999;
background: #000;
margin: 20 }1750人阅读
html学习之路（2）
1、行内元素的居中，例如想设置文本、图片等行内元素水平居中时，可以通过父元素设置 text-align:center 来实现，即给需要设置的元素添加一个父元素的容器，然后设置这个父元素（容器）的text-align属性即可。方法简单，原理也很容易理解，需要注意的是只能针对行内元素；
2**、宽度一定的块状元素居中**。因为是块状元素，所以就没办法运用第一种方法的text-align属性了，这次我们是通过对需要设置的元素的“左右margin”值为“auto”来实现，margin的上下值可以根据需求随意设置，但是左右一定要为”auto”！需要注意的是，在设置 margin:20px auto 之前，一定要先设置width的值，即最后的设置样例为：
div { border:2 width:100 margin:20
即2个像素宽的红色实体边框，整个div元素的宽度为100像素，上下距离浏览器的空白边距为20像素，左右根据内容自动调整，这样就实现了块状元素的居中显示，别忘了，要先设置width：宽度值！宽度值！宽度值！这种方法优点是简单易懂，兼容性也强，但是扩展性比较差，无法自适应未知宽度的元素。
3、宽度不确定块状元素的居中显示。这里大概也可以分为三个方法：
1）运用table标签；2）设置display:inline；3）设置position:relative和left:50%。
3.1、运用table标签。第一步：在需要设置的元素外面加上一个table标签（包括，是不是有点类似设置行内元素时添加一个父元素的容器呢？）。第二步：给这个table设置”左右margin居中”（这里又和设置定宽块状元素的方法一样了）。代码样例：
href="#"&Prev&
href="#"&1&
href="#"&2&
href="#"&3&
href="#"&4&
href="#"&5&
href="#"&Next&
最后出来的效果：
总结：就是将需要进行居中的元素，用一个大表格将其围起来（而且这个表格只有这一个单元格哦），然后设置表格的属性（如第2条方法）居中就行。不过缺点是加了不少的无用标签，代码看起来比较臃肿。
3.2、改变块级元素的display为inline类型，然后设置text-align:center来实现居中效果。代码样例：
.container {
text-align:
.container li {
class="container"&
& href="#"&Prev&&
& href="#"&1&&
& href="#"&2&&
& href="#"&3&&
& href="#"&4&&
& href="#"&5&&
& href="#"&Next&&
总结：首先将需要居中的块级元素的display属性设置为inline，这样的目的是先把块级元素变为行内元素，可以在一行内显示，然后将这些元素的父级元素text-align设置为：center即可。大概原理就是：块级-&行内-&居中(参照第1条方法)，不过缺点也很明显，块级元素的一些特点没有了，例如高度、宽度设置等。
3.3、运用float属性，主要的思想也就是将所需要居中的元素先float到左边，这样就能在一行内显示，然后将整个列表float到父元素左边，然后设置left来设置居中。怎么设置呢？先设置父元素：left:50%，这样整个父元素就往右便宜50%，然后设置列表：right:50%，这样列表的东西再往左走父元素的50%，这样就达到了居中的目的。
代码样例：
.container {
left: 50%;
.container ul {
right: 50%;
padding:0;
margin: 0;
.container li {
.container a {
padding: 0 10
class="container"&
& href="#"&Prev&&
& href="#"&1&&
& href="#"&2&&
& href="#"&3&&
& href="#"&4&&
& href="#"&5&&
& href="#"&Next&&
总结：基本思想也就是将父元素（容器）先往右偏移父容器宽度的50%，然后再将列表的元素向左相对偏移50%，就可以得到居中的效果。（这个方法不理解的话可以看下边W3C博客，那里边介绍的详细，具体链接见下边叙述。）不过我当时在测试这一点的时候，有个问题，就是ul的padding和margin没有清零，然后导致一直不太居中，后来清零就好了。
这就是大概几种元素居中显示的方法吧，这里边我参考了还有，这位大神介绍的更是详细，感兴趣的朋友可以看看。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2027次
排名：千里之外创造有活力的品牌网站 提升用户体验和品牌价值感
CSS3 实现不同元素水平居中、垂直居中的方法
?&行内元素如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center 来实现的?&定宽块状元素当被设置元素为块状元素时用 text-align：center 就不起作用了。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。?&在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。?&不定宽块状元素11）为需要设置的居中的元素外面加入一个 table 标签( 包括 tbody、tr、td )。2）为这个 table 设置“左右 margin 居中。?&不定宽块状元素2改变块级元素的 dispaly 为 inline 类型，然后使用 text-align:center 来实现居中效果?&不定宽块状元素3通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置osition:relative 和 left:-50% 来实现水平居中?&父元素高度确定的单行文本垂直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的?&说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效?&父元素高度确定的多行文本1使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle（因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了）?&父元素高度确定的多行文本2在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display:table-cell， vertical-align:middle，但注意 IE6、7 并不支持这个样式。
扫描访问手机站
公众号关注
北京博乐虎科技有限公司　版权所有 京ICP备号 京公海网备号　
　　　　　　　　关于块级元素的居中问题【css吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：50,003贴子：
关于块级元素的居中问题收藏
css是中国特种安全团队----北京特卫的英文缩写,英文全称为Cnguardee Speacil Security为所有需要提供安全护卫的人群服务,用专业的服务得到您的认可!24H热线:
写了两个嵌套的div(div1嵌套div2)，现在想让div2在div1的中间，试了在子元素用display:inline-父元素文本居中，结果只能左右居中，无法上下居中，后来用vertical-align:也不行。在网上找了很多方法，试了都不行，想问下这种块级元素的居中问题如何处理？下面是我写的代码：
感觉你这里面有不少无用的代码。上下居中的话可以用绝对定位，top：50%，margin值为自身高度一半的负值
利用transform的translate()或translateY()方法 &!--Html 代码--&&div class=&outside&&
&div class=&inner&&
&/div&&/div&/*Css 代码*/
.outside {
background-color: #5555
height: 720
width: 350
height: 350
background-color: #ee5555;
top:50%;/*相对祖先元素向下移动50%*/
transform: translateY(-50%);/*元素y轴移动自身的一半*/
transform: translate(,-50%);/*元素y轴移动自身的一半,与上一行效果相同*/
}你可以参考一下，另外，这个，可以搜索CSS 各类 块级元素 行级元素 水平 垂直 居中问题有很多讲解的。
关于块级元素居中问题：1、考虑IE低版本
在没有设置定位已知高度的情况下，可以使用margin:0水平居中
在设置了定位已知高度的情况下，通过设置top/left和-marginLeft/-maginT居中2、考虑移动端
移动端的可以通过dislay:和display:flex属性来设置居中
以及通过css3的transform来居中3、通过设置父元素为display:table来实现。
登录百度帐号推荐应用web前端的16种方法实现水平居中垂直居中
web前端的16种方法实现水平居中垂直居中
食品科学与技术
水平居中1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.2) 若是块级元素, 该元素设置 margin:0 auto即可.3) 若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:.parent{ width: -moz-fit- width: -webkit-fit- width:fit- margin:0 }fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以轻松实现水平居中, 目前只支持Chrome 和 Firefox浏览器.4) 使用flex 2012年版本布局, 可以轻松的实现水平居中, 子元素设置如下:.son{ display: justify-content: }5) 使用flex 2009年版本, 父元素display:box-pack:如下设置:.parent { display: -webkit- -webkit-box-orient: -webkit-box-pack: display: -moz- -moz-box-orient: -moz-box-pack: display: -o- -o-box-orient: -o-box-pack: display: -ms- -ms-box-orient: -ms-box-pack: display: box-orient: box-pack: }6) 使用CSS3中新增的transform属性, 子元素设置如下:.son{ position: left:50%; transform:translate(-50%,0); }7) 使用绝对定位方式, 以及负值的margin-left, 子元素设置如下:.son{ position: width:固定; left:50%; margin-left:-0.5宽度; }8) 使用绝对定位方式, 以及left:0;right:0;margin:0 子元素设置如下:.son{ position: width:固定; left:0; right:0; margin:0 }垂直居中单行文本1) 若元素是单行文本, 则可设置 line-height 等于父元素高度行内块级元素2) 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央..parent::after, .son{ display:inline- vertical-align: }这是一种很流行的方法, 也适应IE7.元素高度不定3) 可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-vertical-align:优点元素高度可以动态改变, 不需再CSS中定义, 如果父元素没有足够空间时, 该元素内容也不会被截断.缺点IE6~7, 甚至IE8 beta中无效.4) 可用 Flex 2012版, 这是CSS布局未来的趋势. Flexbox是CSS3新增属性, 设计初衷是为了解决像垂直居中这样的常见布局问题. 相关的文章如《弹性盒模型Flex指南》父元素做如下设置即可保证子元素垂直居中:.parent { display: align-items:内容块的宽高任意, 优雅的溢出.可用于更复杂高级的布局技术中.IE8/IE9不支持需要浏览器厂商前缀渲染上可能会有一些问题5) 使用flex 2009版..parent { display: box-orient: box-pack: }实现简单, 扩展性强兼容性差, 不支持IE6) 可用 transform , 设置父元素相对定位(position:relative), 子元素如下css样式:.son{ position: top:50%; -webkit-transform: translate(-50%,-50%); }代码量少IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象.元素高度固定7) 设置父元素相对定位(position:relative), 子元素如下css样式:.son{ position: top:50%; height:固定; margin-top:-0.5高度; }适用于所有浏览器.父元素空间不够时, 子元素可能不可见(当浏览器窗口缩小时,滚动条不出现时).如果子元素设置了overflow:auto, 则高度不够时, 会出现滚动条.8) 设置父元素相对定位(position:relative), 子元素如下css样式:.son{ position: height:固定; top:0; bottom:0; margin:auto 0; }简单没有足够空间时, 子元素会被截断, 但不会有滚动条.总结水平居中较为简单, 共提供了8种方法, 一般情况下 text-align:center,marin:0 足矣① text-align:② margin:0③ width:fit-④ flex⑤ 盒模型⑥ transform⑦⑧ 两种不同的绝对定位方法垂直居中, 共提供了8种方法.① 单行文本, line-height② 行内块级元素, 使用 display: inline-block, vertical-align: 加上伪元素辅助实现③ vertical-align④ flex⑤ 盒模型⑥ transform⑦⑧ 两种不同的绝对定位方法我们发现, flex, 盒模型, transform, 绝对定位, 这几种方法同时适用于水平居中和垂直居中.希望对大家有所帮助.
本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。
食品科学与技术
百家号 最近更新：
简介: 每天分享最新的科技视频。
作者最新文章