css垂直居中
行内元素垂直居中可以用vertical-align:middle; 水平居中text-align:center
https://www.zhihu.com/question/20543196
1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行: 支持ie的
#parent{ position:relative; } #child{ position: absolute; top: 50%; transform: translateY(-50%); }
父级元素以及子元素高度宽度未知如何实现水平垂直居中?
这个方案在父级元素们没有设置position为relative的时候,相对于html是水平垂直居中的,但是如果父级元素指定position为relative,并且高度不定的时候,无法实现垂直居中。
.child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 使用css3的transform来实现 */ }
css vertical-align:middle (块级元素支持)或者用table <td vertical="middle">
可以用<center> </center>来实现
另外还有个办法
position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;
对于ie6,只能把position:改成absolute;
2.若父容器下只有一个元素,且父元素设置了高度,则只需要使用相对定位即可
#parent{ height:46px; } #child{ position: relative; top: 50%; transform: translateY(-50%); }
3.Flex 布局 给父容器设置如下属性:旧浏览器不支持:
#parent{ display:flex;/*Flex布局*/ display: -webkit-flex; /* Safari */ align-items:center;/*指定垂直居中*/ }
4.使用给当前元素(浏览器都能够兼容,不足之处就是需要固定宽高) position:absolute,设置left、top、margin-left、margin-top的属性
#child{ position:absolute; width:200px; height:200px; top:50%; left:50%; margin-top:-100px; margin-left:-100px; background:red; }
5.利用position:absolute属性,设置top/bottom/right/left
#child{ position:absolute; width:140px; height:140px; top:0; right:0; bottom:0; left:0; margin:auto; background:black; }
6.使用position:fixed,同样设置left、top、margin-left、margin-top的属性(IE是不支持这个position:fixed属性的)
.child{ position:fixed; width:180px; height:180px; top:50%; left:50%; margin-top:-90px; margin-left:-90px; background:orange; }
7.利用position:fixed属性,margin:auto这个必须(和第五个差不多)
.three{ position:fixed; width:160px; height:160px; top:0; right:0; bottom:0; left:0; margin:auto; background:pink; }
8.利用display:table-cell属性使内容垂直居中
#child{ display:table-cell; vertical-align:middle; text-align:center; width:120px; height:120px; background:purple; }
9.最简单的一种使行内元素居中的方法,使用line-height属性,比如使文字垂直居中对齐
.demo{ width:100px; height:100px; line-height:100px; text-align:center; background:gray; }
.demo{ width:90px; height:90px; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; background:yellow; color:black; }
11.使用css3的新属性transform:translate(x,y)属性 这个方法可以不需要设定固定的宽高,在移动端用的会比较多,在移动端css3兼容的比较好
.demo{ position:absolute; width:80px; height:80px; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); background:green; }
12.使用:before元素
.demo{ position:fixed; display:block; top:0; right:0; bottom:0; left:0; text-align:center; background:rgba(0,0,0,.5); } .demo:before{ content:''; display:inline-block; vertical-align:middle; height:100%; } .demo .content{ display:inline-block; vertical-align:middle; width:60px; height:60px; line-height:60px; color:red; background:yellow; }
表格居中 除了IE6/7都支持
<div id="box"> <div id="content"></div> </div> #box { display: table; height: 400px; background: #c00; } #content { color: #fff; text-align: center; display: table-cell; vertical-align: middle; }
inline-block居中: 兼容性:支持inline-block的浏览器均可。对于IE6/7,可以先使用hack方式使其支持Inline-block后,使用此方法实现垂直居中。
<div id="box">
<div id="content">我是内容<br />我也是内容</div>
<div id="actor">我是演员</div>
</div>
#box { height: 400px; background: #c00; } #content, #actor { display: inline-block; vertical-align: middle; } #content { font-size: 12px; color: #fff; } #actor { height: 400px; font-size: 0; }
inline行内元素居中;原理inline 元素的等内边距,上下两边的内边距相等,则中间内容居中
<div class="demo"> <span>These</span> <span>elements</span> <span>will be</span> <span>centered vertically</span> </div> .demo { background-color: black; padding: 50px; } .demo span { background-color: gray; color: white; padding: 50px 0; }
inline 元素的行高,行高与容器高度相等,则中间内容居中
<main>
<div class="demo">
<span>these</span>
<span>elements</span>
<span>will be</span>
<span>centered verticallay</span>
</div>
</main>
.demo { background-color: black; height: 100px; } .demo span { background-color: gray; color: white; line-height: 100px; }
.demo { background-color: black; padding: 50px; display:table; } .demo span { display:table-cell; color: white; vertical-align: middle; }
block 元素
block 元素利用绝对定位以及负外边距,适用于知道元素的宽度和高度,兼容性好,所以会看到很多远古时代的居中都采用这种办法,注意这里的外边距减去的是 block 元素宽度的一半,即margin:-(width/2) px
.parent{ position:relative; } .child{ position:absolute; top:50%; height:100px; margin-top:-50px; }
block 元素利用绝对定位以及 transform ,适用于不知道元素的宽度盒高度
.parent{ position:relative; } .child{ position:absolute; top:50%; transform:translateY(-50%); }
block 元素在外部的容器,利用 flex 的属性将其设置为下图,则子元素 block 元素垂直居中
.parent{ display:flex; flex-direction:column; justify-content:center; }
- 在垂直居中的基础上,block 元素的三种方法均能演变为水平垂直居中,前两种只需增加 left 属性以及 margin-left 或者 transformX 当中的一个属性达到目的
- 利用 flex 的话,添加多一个 align-items:center 即可
<html lang="en"> <head> <meta charset="UTF-8"> <title>task1_4_1</title> </head> <body> <div class="container"> <div id="circle1"></div> <div id="circle2"></div> </div> </body> </html> .container{ width: 400px; height: 200px; background-color: #ccc; position: absolute; left: 50%; top:50%; margin-top: -100px; margin-left: -200px; overflow: hidden; } #circle1, #circle2{ border-radius: 50px; width: 100px; height: 100px; background-color: #fc0; } #circle1{ position: relative; left:-50px; top: -50px; } #circle2{ position: relative; left:350px; bottom: -50px; }
<html lang="en"> <head> <meta charset="UTF-8"> <title>task4</title> <link rel="stylesheet" href="css/styles_2.css"> </head> <body> <div class="container"> <div id="circle1"></div> <div id="circle2"></div> </div> </body> </html> .container{ width: 400px; height: 200px; background-color: #ccc; position: absolute; left: 50%; top:50%; /*利用transform达到水平垂直居中效果*/ transform: translate(-50%, -50%); overflow: hidden; } #circle1, #circle2{ border-radius: 50px; width: 100px; height: 100px; background-color: #fc0; position: relative; } #circle1{ left:-50px; top: -50px; } #circle2{ left:350px; bottom: -50px; }
<html lang="en"> <head> <meta charset="UTF-8"> <title>task4</title> <link rel="stylesheet" href="css/styles_3.css"> </head> <body> <div class="wrap"> <div class="container"> <div id="circle1"></div> <div id="circle2"></div> </div> </div> </body> </html> .wrap{ width:500px; height: 500px; border: 1px solid black; margin: 0 auto; display: flex; justify-content: center; align-items: center; } .container{ width: 400px; height: 200px; background-color: #ccc; overflow: hidden; position: relative; } #circle1, #circle2{ border-radius: 50px; width: 100px; height: 100px; background-color: #fc0; position: relative; } #circle1{ left:-50px; top: -50px; } #circle2{ left:350px; bottom: -50px; }