css 实现元素水平垂直居中总结5中方法

个人总结，如有错误请指出，有好的建议请留言。o(^▽^)o

一、margin:0 auto；text-align:center；line-height方法　　

1 <div id="divAuto">margin,text-align;水平居中</div>

1 /*
2     margin:0 auto; 设置块元素（或与之类似的元素）的水平居中
3     text-align:center;设置文本或img标签等一些内联对象（或与之类似的元素）的水平居中
4     line-height:;高度设置为容器的高度 实现单行文本垂直居中(伪居中)
5     overflow:hidden;为了防止内容超出容器或者产生自动换行
6 */
7 #divAuto {
8     width:300px;
9     height:50px;
10     background-color:#ff6a00;
11     margin:0 auto;
12    text-align:center;
13    line-height:50px;
14    overflow:hidden;
15 }

二、div不设置高度，子元素padding填充

1     <div id="divPar">
2         <p>padding填充实现居中</p>
3     </div>

1 /*
2     div 不设置高度
3     padding:20px 0;使用padding值把div填充起来，是一种“看起来”的垂直居中方式，
4     这种方法应用的前提就是容器的高度必须是可伸缩的
5 */
6 #divPar {
7     width:100px;
8     background-color:#00ff21;
9 }
10 #divPar p{
11     padding:20px 0;
12 }

三、display:table；display:table-cell; 元素表格化实现垂直居中

<div id="divBox">
<div id="divChild">table化，vertical-align:middle；实现垂直居中</div>
</div>

1 /*
2     使用table的方式实现元素垂直居中
3     父div的display设置为table
4     子div的display设置为table-cell
5     通过vertical-align:middle;实现元素垂直居中
6     缺点：IE8无效
7 */
8 #divBox {
9     width:200px;
10     height:100px;
11     margin:10px auto;
12     background-color:#000000;
13     display:table;
14     text-align:center;
15 }
16 #divChild {
17     width:50px;
18     height:50px;
19     background-color:#ff6a00;
20     display:table-cell;
21     vertical-align:middle;
22 }

 四、利用父元素相对定于，子元素绝对定位的方式实现

<div id="divRel">
<div id="divAbs">绝对定位</div>
</div>

1 /*
2     利用父元素相对定位 子元素绝对定位的方式实现子元素水平垂直居中
3     top:50%;left:50% 实现子元素左上角处在父元素的中心位置
4     margin设置宽高位负的子元素宽高的一半 实现子元素相对父元素水平垂直居中
5     缺点：没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)
6 */
7 #divRel {
8     width:500px;
9     height:200px;
10     position:relative;
11     background-color:#ffd800;
12 }
13 #divAbs {
14     width:100px;
15     height:50px;
16     position:absolute;
17     background-color:#4800ff;
18     text-align:center;
19     top:50%;
20     left:50%;
21     margin:-25px 0 0 -50px;
22 }

1 /*绝对居中 子元素的另一种实现方式*/
2 #divAbs {
3     width:100px;
4     height:50px;
5     position:absolute;
6     background-color:#4800ff;
7     text-align:center;
8     left:0;/*-- left和right配对出现控制水平方向 --*/
9     right:0;
10     top:0;/*-- top和bottom配对出现控制垂直方向居中 --*/
11     bottom:0;
12     margin:auto;/* 这句是必须的*/
13
14 }

五、使用一个div当填充元素实现子元素的垂直居中

<div id="parent">
<div id="zero">填充元素</div>
<div id="child">Content here</div>
</div>

1 /*这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;content 清除浮动，并显示在中间;
2 缺点：需要额外的空元素*/
3
4 #parent {width:800px;
5     height:300px;
6     border:1px solid #ccc;}
7
8 #zero {
9     float:left;
10     height:50%;
11     margin-bottom:-100px;/*居中元素高度的一半*/
12 }
13 #child  {
14     clear:left;/*清除浮动*/
15     height:200px;
16     background-color:#ff0000;
17 }

经验所限，暂时更新到这里...

转载于:https://www.cnblogs.com/Medeor/p/4965067.html

• 点赞
• 收藏
• 分享
• 文章举报