总结的几种水平居中和垂直居中方法。
先上效果:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Position</title> <link rel="stylesheet" href="style.css"> <style type="text/css"> #center-hor1{ background-color: red; color: #F8CBAD; top: 50%; left :50%; width: 100px; position: absolute; /*transform: translateY(-50%); !*防止多行出现的对齐问题*!*/ transform: translate(-50%, -50%); } #center-hor2 { position:absolute; color: #F8CBAD; width:100px; height:100px; top:50%; left:50%; margin-top:-50px; /*height的一半*/ margin-left:-50px;/*width的一半*/ background:red; } #center-hor3{ background-color: red; color: #F8CBAD; width: 100px; height: 100px; margin: auto; left: 0; right: 0; top: 0; bottom: 0; position: absolute; } #center-ohor1 { background-color: red; color: #F8CBAD; position: relative; top: 50%; transform: translateY(-50%); /*防止多行出现的对齐问题*/ } #center-ver1 { background-color: red; color: #F8CBAD; border: 1px black solid; display: inline-block; width: 150px; } #center-ver2 { background-color: red; color: #F8CBAD; border: 1px black solid; width: 150px; margin: 0 auto; text-align: center;/*让文本居中*/ } #center-ver3 { display: flex; flex-direction: row;/*主轴方向row为默认*/ justify-content: center;/*主轴对齐方式*/ align-items: center; } #center-ver3 div { width: 50px; height: 100px; border: 1px black solid; } #center-ver4 { display: flex; flex-direction: column;/*主轴为列*/ justify-content: center;/*主轴对齐方式*/ align-items: center; } #center-ver4 div { height: 50px; width: 100px; border: 1px black solid; } ul > li { border: 1px black solid; width: 200px; } ul > li > span { color: blueviolet; } </style> </head> <body style='margin:0;padding:0;background:#BDD7EE;color:white;'> <div style="display: flex"> <div> <div style="width: 300px ;border: black 1px solid; position: relative"> <div id="center-hor1">父元素有高度或者父元素无高度,高度由子元素撑开</div> <div style="height: 200px ;color: black">方式1(注意使用了transform)</div> </div> <div style="width: 300px ;border: black 1px solid; position: relative"> <div id="center-hor2">父元素有高度或者父元素无高度,高度由子元素撑开</div> <div style="height: 200px ;color: black">方式2(不能微调)</div> </div> <div style="width: 300px ;border: black 1px solid; position: relative"> <div id="center-hor3">父元素有高度或者父元素无高度,高度由子元素撑开</div> <div style="height: 200px ;color: black">方式3(能微调)</div> </div> <div style="width: 300px ;height:200px;border: black 1px solid;"> <div id="center-ohor1">父元素有高度且只有一个子元素,不会出现普通流以为的标签</div> </div> </div> <div style="border: 1px black solid ;width: 300px;height: 806px;"> <div style="text-align: center;width: 300px;height: 200px;"> <span id="center-ver1">使用text-align可以使行内元素居中,不能用于块级元素。好处是简单</span> </div> <div style="width: 300px;height: 200px; border: 1px black solid;"> <div id="center-ver2">使用margin,适合于定宽</div> </div> <div id="center-ver3" style="width: 300px;height: 200px; border: 1px black solid;"> <div>1</div> <div style="color: black">这个布局和下面的都是使用flex,flex对于位置控制很强大,能创造一些很麻烦的布局</div> <div>3</div> </div> <div id="center-ver4" style="width: 300px;height: 200px; border: 1px black solid;"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div> <ul> <li style="display: inline-block"> <span>同行方式1上面表格使用的(使用flex布局专门用来折腾对齐布局)</span> </li> <li style="display: inline-block"> <span>同行方式2 (使用行内块+表格 单纯做做子元素是行内元素的还好 像上面那种不行)</span> </li > </ul> </body> </html>
style.css文件
body .contain{ margin:10px; border:10px solid white; width:300px; background:#F8CBAD; padding:10px 0 0 10px; font-size:20px; font-weight:bold; } .one { width:50px; height:50px; background-color:#FFE699; top:-10px; left:0px; position: relative; } .two { height:50px; color:#fff; background-color:#C5E0B4; }