方式 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>
效果图:
来源: http://www.bubuko.com/infodetail-2986092.html