直接上code:
HTML文档
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>居中设置</title> <link href="../css/居中设置.css" rel="stylesheet" /> </head> <body> <h1>居中样式</h1> <p>行内元素和块级元素的垂直居中、水平居中都不一样</p> <hr /> <h2>两个块级元素怎么垂直水平居中</h2> <div class="box1"> <div class="box2"></div> </div> <br /> <div class="box3"> <div class="box4"></div> </div> <br /> <div class="box1"> <div class="box6"></div> </div> <br /> <h3>对于块级子元素宽高未知的情况下</h3> <div class="box7"> <div class="box8"></div> </div> <br /> <div class="box9"> <div class="box10"></div> </div> <br /> <h2>内联元素和行内块元素的居中设置</h2> <p>注意:内联元素(行内元素)不能设置宽高</p> <div class="box11"> <a href="##">这是一条用来上下左右居中的链接--请勿点击</a> </div> <br /> <div class="box12"> <img src="../images/config.png" alt="Alternate Text" /> </div> <br /> <div class="box11"> <p>可以将那些行内元素转换为块级元素,这样利用块级元素设置水平垂直居中</p> </div> <br /> <h2>来看看img元素</h2> <p> img属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。类似的元素还有input等。 行内非替换元素,例如, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和padding left、right改变宽度。 </p> <div class="box11"> <img src="../images/config.png" alt="Alternate Text" /> </div> <br /> <div class="box13"> <img src="../images/config.png" alt="Alternate Text" /> </div> <br /> <div class="box14"> <img src="../images/config.png" alt="Alternate Text" /> </div> </body> </html>
css样式:
body { padding:0px; margin:0px; } /*第一种方法将位置都写死了,有的时候很不方便*/ .box1{ 200px; height:200px; background-color:#e0cbcb; position:relative; } .box2 { 50px; height: 50px; background-color: red; /**margin设置的时候只能水平居中,不能做到垂直居中*/ /*margin: 0 auto; */ /*使用定位进行水平垂直居中*/ position: absolute; top: 50%; left:50%; /*向上移动自身高度的一半*/ margin-top:-25px; /*向左移动自身宽度的一半*/ margin-left:-25px; } /*第二种方法,利用css3的transform属性*/ /*这个方法比较方便*/ .box3 { 200px; height: 200px; background-color: #e0cbcb; } .box4{ 50px; height:50px; background-color:red; position:relative; top:50%; left:50%; transform:translate(-50%,-50%) } /*第三种方法*/ /*position: absolute; left: 0; right: 0; top: 0; bottom: 0;这是自动填充父元素的可用空间。然而给子元素设定了宽高,那么多余的空间,会被margin:auto平均分配。*/ .box6 { 50px; height: 50px; background-color: red; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin:auto; } /*第四种方法*/ /*利用表格的特性,将子元素看成行内元素,实现元素中的文字(文字可以是单行的,也可以是多行的)或图片水平垂直居中*/ .box7 { 100px; height:100px; background-color:red; display:table; } .box8 { background-color: yellow; display: table-cell; vertical-align: middle; text-align: center; } /*第五种方法,强烈推荐这种计算*/ /*弹性布局 display: flex。在已知或未知元素宽高的情况下,都能使元素居中显示。*/ .box9 { 100px; height: 100px; background-color: red; display: flex; /*align-items属性适用于所有的flex容器,它是用来设置每个flex元素在侧轴上的默认对齐方式。*/ align-items: center; /*内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。*/ justify-content: center; } .box10 { 30px; /*宽度可以省略*/ height: 30px; /*高度可以省略*/ background-color:yellow; } /*第六种方法:一般情况行内元素的水平垂直居中,将样式写在父元素就行*/ .box11{ 100%; height:100px; background-color:#000000; color:white; text-align:center; /*行内元素水平居中*/ line-height:100px; /*行内元素垂直居中*/ } .box11>a{ color:white; text-decoration:none; } /*第七种方法:img元素有点特殊,它并不是单纯的行内元素,可以设置宽高*/ .box12 { 100%; height: 100px; background-color: #000000; text-align:center; /*img元素可以居中*/ line-height:140px; /*这里需要进行调整,因为img元素对齐的方式有点不一样*/ } .box12>img{ 50px; } /*第八种方法:行内元素转成块级元素*/ /*可以将图片转换为块级元素,然后利用块级元素进行调整*/ .box11 > img { /*img只设置宽高中的一个属性,另一个会自动调整成原来比列,保证不变形*/ /*单位是%的话,会根据父元素进行调整*/ height: 50%; display: block; /*第二种方法*/ position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%) } /*第九种方法:父元素使用display:table-cell*/ /*这个方法十分方便快捷,可以放心使用*/ .box13 { 500px; height: 150px; background-color: antiquewhite; display: table-cell; vertical-align: middle; text-align: center; } .box13>img{ height:50%; } /*第十种方法:给div设置text-align,给img设置transform,这样也能居中*/ .box14 { 500px; height: 150px; background-color: antiquewhite; text-align:center; } .box14 > img { height: 50%; /*vertical-align:150px; 这句话放在这没有起到作用*/ /*可以使用margin-top调整垂直位置,但是比较死板*/ /*margin-top:50px;*/ /*使用transform沿着Y轴移动50%,就能够垂直居中*/ transform:translateY(50%); }
这里只尝试了div包一个div、div包一个img元素这两种情况,后续学习div包一个input的情况!