第一种:(外层盒子 <占满全屏>, 内层盒子<自适应宽高> 的)盒子居中
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- *{
- padding:0;
- margin:0;
- }
- html,body{
- height:100%;
- }
- .outerBox {
- display: flex;
- justify-content: center;
- align-items: center;
- background: #bbb;
- }
- .middleBox {
- background: #ddd;
- }
- </style>
- </head>
- <body class="outerBox">
- <div class="middleBox">
- <P>1, 外层盒子占满全屏</P>
- <P>2, 内层盒子自适应宽高</P>
- </div>
- </body>
- </html>
第二种:(外层盒子 <无固定> 宽高, 内层盒子 <有显示固定> 宽高的)盒子居中
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- *{
- padding:0;
- margin:0;
- }
- .middleBox{
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- width: 400px;
- height: 300px;
- border: 50px solid #000;
- background: red;
- }
- </style>
- </head>
- <body>
- <div class="middleBox">
- </div>
- </body>
- </html>
第三种:(外层盒子 <无固定> 宽高, 内层盒子 <有显示固定> 宽高的)盒子居中
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- * {
- padding: 0;
- margin: 0;
- }
- .middleBox {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 400px;
- height: 300px;
- border: 50px solid #000;
- margin: -200px auto auto -250px;
- background: red;
- }
- </style>
- </head>
- <body>
- <div class="middleBox">
- </div>
- </body>
- </html>
第四种:(外层盒子 <无固定> 宽高, 内层盒子 <有显示固定> 宽高的)盒子居中
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 元素居中</title>
- <style>
- *{
- margin: 0;
- padding:0;
- }
- .middleBox{
- width: 200px;
- height: 200px;
- background: red;
- position: absolute;
- }
- </style>
- </head>
- <body>
- <div class="middleBox"></div>
- <script>
- var oDiv=document.getElementsByTagName('div')[0];
- var clientWidth=document.documentElement.clientWidth||document.body.clientWidth;
- var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
- var l=(clientWidth-200)/2;
- var t=(clientHeight-200)/2;
- oDiv.style.left=l+'px';
- oDiv.style.top=t+'px';
- </script>
- </body>
- </html>
第五种:(外层盒子 <有显式固定> 宽高, 内层盒子 <有显示固定> 宽高的)盒子居中
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- *{
- padding:0;
- margin:0;
- }
- .outerBox {
- width: 400px;
- height: 300px;
- border: 10px solid #000;
- display:table-cell;
- vertical-align:middle;
- background: red;
- }
- .middleBox{
- margin: 0 auto;
- width: 150px;
- height: 100px;
- border: 10px solid #000;
- background: red;
- }
- </style>
- </head>
- <body>
- <div class="outerBox">
- <div class="middleBox">
- </div>
- </div>
- </body>
- </html>
第六种:(外层盒子 <有显式固定> 宽高, 内层盒子 <有显示固定> 宽高的)盒子居中
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- *{
- padding:0;
- margin:0;
- }
- .outerBox{
- width:500px;
- height:400px;
- border:10px solid green;
- }
- .middleBox{
- margin: 50px 50px;
- width:300px;
- height:200px;
- border:50px solid green;
- }
- </style>
- </head>
- <body>
- <div class="outerBox">
- <div class="middleBox"></div>
- </div>
- </body>
- </html>
另 1: 浮动元素居中
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 浮动元素居中</title>
- <style>
- *{
- margin:0;
- padding:0;
- }
- .outer{
- width:500px;
- height:400px;
- border:10px solid green;
- vertical-align: middle;
- display: table-cell;
- }
- .middle{
- position: relative;
- float:left;
- left:50%;<!--.outer 元素 width 的 50%, 一半右移 -->
- }
- .inner{
- border:10px solid green;
- width:300px;
- height:200px;
- background: red;
- position: relative;
- float:left;
- right:50%;<!--.middle 元素 width 的 50%, 一半左移 -->
- }
- </style>
- </head>
- <body>
- <div class="outer">
- <div class="middle">
- <div class="inner"></div>
- </div>
- </div>
- </body>
- </html>
另 2: 行内元素水平垂直居中
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- *{
- margin:0;
- padding:0;
- }
- p{
- width:500px;
- height:200px;
- line-height: 200px;
- text-align:center;
- border: solid red 1px;
- }
- </style>
- </head>
- <body>
- <p>
- <a > 我是钱成</a>
- </p>
- </body>
- </html>
来源: http://www.qdfuns.com/article/40901/d366452731344d95595492e74ddc2426.html