垂直居中方式
阿新 • • 發佈：2019-03-13
http info col tran css absolute pad flex布局 text
方式1：flex布局,display:flex;align-items:center
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title></title> <style type="text/css"> *{padding:0;margin:0;} .box{width:100px;height:100px;border:1px solid #ddd;display:flex;align-items:center;} .inner{width:40px;height:40px;background:red;} </style> </head> <body> <div class="box"> <div class="inner"></div> </div> </body> </html>
效果如下：
方式2：position+margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title></title> <style type="text/css"> *{padding:0;margin:0;} .box{width:100px;height:100px;border:1px solid #ddd;position:relative;} .inner{width:40px;height:40px;background:red;position:absolute;top:50%;margin-top:-20px;} </style> </head> <body> <div class="box"> <div class="inner"></div> </div> </body> </html>
效果圖：與上面一樣
方式3：如果不知道具體高度，通過position+transform
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title></title> <style type="text/css"> *{padding:0;margin:0;} .box{width:100px;height:100px;border:1px solid #ddd;position:relative;} .inner{background:red;position:absolute;top:50%;transform:translateY(-50%);} </style> </head> <body> <div class="box"> <div class="inner">545454</div> </div> </body> </html>
效果圖：
方式4：display:table-cell+vertical-align:middle
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title></title> <style type="text/css"> *{padding:0;margin:0;} .box{width:100px;height:100px;border:1px solid #ddd;display:table-cell;vertical-align:middle;} .inner{background:red;} </style> </head> <body> <div class="box"> <div class="inner">545454</div> </div> </body> </html>
效果圖：
垂直居中方式