&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
设置子元素在一个不清楚宽高的父元素中垂直居中
摘要：通过以下两种方法便可以实现垂直居中的操作了,并且可以实现子元素在一个不清楚宽高的父元素中垂直居中的效果。方法1.使用定位和负margin可以实现。(缺点:这种方法可以不用知道父元素的宽高,但是必需得知道子元素的宽高才可以设置)&styletype=&text/css&&.parent{/*父元素宽高随便设置*/width:700height:500background:position:/*给父元素相
通过以下两种方法便可以实现垂直居中的操作了,并且可以实现子元素在一个不清楚宽高的父元素中垂直居中的效果。
方法1. 使用定位和负margin可以实现。
(缺点:这种方法可以不用知道父元素的宽高,但是必需得知道子元素的宽高才可以设置) &style type=&text/css&& .parent{ /*父元素宽高随便设置*/ width: 700 height: 500 background: position: /*给父元素相对定位relative*/ } .son{ width: 200 height: 150 background:
position: /*子元素设置绝对定位absolute*/ left: 50%; top: 50%; margin-left: -100 margin-top: -75 /*设置偏移值left、top 和 负的margin使得子元素在父元素中居中*/ }&/style& &div class=&parent&& &div class=&son&&&/div&&/div&
方法 2. 使用弹性盒子flexbox进行布局。
做法:只需要给父元素设置三条属性值(display:justify-content:align-items:),不需要考虑父元素和子元素的宽高问题。 &style type=&text/css&& .parent{ /*父元素宽高随便设置*/ width: 1200 height: 700 background: display: /*justify-content属性定义了子项目在主轴上(X轴)的对齐方式。*/ justify-content: /*align-items属性定义子项目在交叉轴(Y轴上)上如何对齐。*/ align-items: } .son{ /*子元素宽高随便设置*/ width: 200 height: 150 background:
/*align-self:*/ /*可以不用设置:align-self属性允许单个子项目有与其他子项目不一样的对齐方式,可覆盖父元素的align-items属性。 * 默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch */ }&/style& &div class=&parent&& &div class=&son&&&/div&&/div&
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
邮箱低至5折
推荐购买再奖现金，最高25%
&200元/3月起
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
设置子元素在一个不清楚宽高的父元素中垂直居中相关信息，包括
的信息，所有设置子元素在一个不清楚宽高的父元素中垂直居中相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
International父div嵌套子div，设置子div水平垂直居中！！！
父级有div嵌套子div，那么如何让子div居中呢（2中方式）？？？
（1）通过给子级div添加span兄弟元素实现水平垂直居中
运行结果如下图：
（2）通过给父级div模拟table，子级div外层添加span元素模拟table-cell单元格实现水平垂直居中
&运行结果和方法1一样的效果。
设置属性时需要注意的就是：inline、block、和inline-block属性。
（一）总体概念
block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和
inline elements
(内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG,
block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如
P 元素，只能包含inline元素，而不能包含block元素。
一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。
（二）总体概念
display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right,
margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom,
margin-top, margin-bottom不会产生边距效果。
display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。方法一&思路：显示设置父元素为：table，子元素为：cell-table，这样就可以使用vertical-align: center，实现水平居中优点：父元素（parent）可以动态的改变高度（table元素的特性）缺点：IE8以下不支持
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&未知宽高元素水平垂直居中&/title&
height:300
width: 300
background-color: #FD0C70;
.parent1 .child{
display: table-
vertical-align:
text-align:
font-size: 16
&div class="parent1"&
&div class="child"&hello world-1&/div&
思路：使用一个空标签span设置他的vertical-align基准线为中间，并且让他为inline-block，宽度为0缺点：多了一个没用的空标签，display:inline-blockIE 6 7是不支持的(添加上：_zoom1;*display:inline)。当然也可以使用伪元素来代替span标签，不过IE支持也不好，但这是后话了
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&未知宽高元素水平垂直居中&/title&
height:300
width: 300
text-align:
background: #FD0C70;
.parent2 span{
display: inline-;
height: 100%;
vertical-align:
zoom: 1;/*BFC*/
.parent2 .child{
display: inline-
zoom: 1;/*BFC*/
&div class="parent1"&
&div class="child"&hello world-1&/div&
&div class="parent2"&
&span&&/span&
&div class="child"&hello world-2&/div&
思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)优点：高大上,可以在webkit内核的浏览器中使用缺点：不支持IE9以下不支持transform属性
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&未知宽高元素水平垂直居中&/title&
height:300
width: 300
background: #FD0C70;
.parent3 .child{
left: 50%;
transform: translate(-50%, -50%);
&div class="parent3"&
&div class="child"&hello world-3&/div&
方法四：思路：使用css3 flex布局优点：简单 快捷缺点：兼容不好吧，详情见：http://caniuse.com/#search=flex
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&未知宽高元素水平垂直居中&/title&
justify-content:
align-items:
width: 300
height:300
background: #FD0C70;
.parent4 .child{
&body&div& &div class="parent4"&
&div class="child"&hello world-4&/div&
阅读(...) 评论()1个不固定高度的div能在屏幕中实现垂直居中吗_百度知道
1个不固定高度的div能在屏幕中实现垂直居中吗
我有更好的答案
div在不同的屏幕中上下左右都居中显示，可以用一段代码来写。html部分：这个div在不同的屏幕里上下左右都能居中！css部分：.box{width:100height:100margin:0pxauto}宽高可以根据自己的情况来设置
采纳率：92%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。div+css 怎么让一个小div在另一个大div里面 垂直居中_百度知道
div+css 怎么让一个小div在另一个大div里面 垂直居中
写一个简单的例子给我吧
我有更好的答案
方法1：.parent&{&&&&&&&&&&width:800&&&&&&&&&&height:500&&&&&&&&&&border:2px&solid�&&&&&&&&&&position:}&.child&{&&&&&&&&&&&&width:200&&&&&&&&&&&&height:200&&&&&&&&&&&&margin:&&&&&&&&&&&&&&&position:&&&&&&&&&&&&&&&top:&0;&left:&0;&bottom:&0;&right:&0;&&&&&&&&&&&&&background-color:&}方法2：.parent&{&&&&&&&&&&&&width:800&&&&&&&&&&&&height:500&&&&&&&&&&&&border:2px&solid�&&&&&&&&&&&&display:table-&&&&&&&&&&&&vertical-align:&&&&&&&&&&&&text-align:&&&&&&&&&}&&&&&&&&.child&{&&&&&&&&&&&&width:200&&&&&&&&&&&&height:200&&&&&&&&&&&&display:inline-&&&&&&&&&&&&background-color:&&&&&&&&&}方法3：.parent&{&&&&&&&&&&&&width:800&&&&&&&&&&&&height:500&&&&&&&&&&&&border:2px&solid�&&&&&&&&&&&&display:&&&&&&&&&&&&justify-content:&&&&&&&&&&&&align-items:&&&&&&&&}&&&&&&&&.child&{&&&&&&&&&&&&width:200&&&&&&&&&&&&height:200&&&&&&&&&&&&background-color:&&&&&&&&&}方法4：.parent&{&&&&&&&&&&&&width:800&&&&&&&&&&&&height:500&&&&&&&&&&&&border:2px&solid�&&&&&&&&&&&&position:&&&&&&&&}&&&&&&&&.child&{&&&&&&&&&&&&width:300&&&&&&&&&&&&height:200&&&&&&&&&&&&margin:&&&&&&&&&&&&position:/*设定水平和垂直偏移父元素的50%，再根据实际长度将子元素上左挪回一半大小*/&&&&&&&&&&&&left:50%;&&&&&&&&&&&&top:50%;&&&&&&&&&&&&margin-left:&-150&&&&&&&&&&&&margin-top:-100&&&&&&&&&&&&background-color:&&&&&&&&&}
采纳率：71%
来自团队：
小div在大div中居中可以设置合适的padding&或margin值，尺寸计算对了就好当然如果尺寸不方便计算的话那就使用定位属性，小的div在大的div中分别绝对定位为：left：50%；top:50%,然后再添加margin-left\top属性，值为负的小div的宽高的一半~简单代码如下：&html&&head& &title&淘宝&2faner&/title& &style&type=&text/css&&
width:&800
height:&500
background:ō
position:&
width:&400
height:&200
position:&
left:&50%;
margin-left:-200&
margin-top:&-100
background:&#
} &/style&&/head&&body&&div&class=&big&& &div&class=&small&&
&/div&&/div&&/body&&/html&
本回答被提问者和网友采纳
大小div分别设置宽高；大div{position:relative}；小div{position:top:50%;margin-top:-小div高度的一半px}；注意上面有个负号别丢了；对这方面感兴趣可以去w3cschool学习。
方法一，小div在大div中居中可以设置合适的padding&或margin值方法二，使用定位属性，小的div在大的div中分别绝对定位为：left：50%；top:50%,然后再添加margin-left\top属性，值为负的小div的宽高的一半~
两种方法1 外div的高有定值，比如div高200 ，内div高100，那么通过 计算margin-top进行定位，（200-100）/2=50，则 margin-top：50px2 外div的高不确定，采用决对定位，position 结合margin，这个方法比较复杂，要对 position margin有深刻理解才行，可以百度搜索一下，这里就不详述了
上面方法很多，但是最好的最通用的一个就够了：
1条折叠回答
其他3条回答
为您推荐：
其他类似问题
div的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。