html简单模板：
<div class="container"> <div class="box"></div> </div>
1.父盒子、子盒子均固定宽高
A.父盒子相对定位，子盒子绝对定位(垂直水平居中)
.container{ width: 600px; height: 500px; position: relative; border: 1px solid black; } .box{ width:100px; height: 200px; background: beige; position: absolute; top:50%; left:50%; margin-left: -50px; margin-top: -100px; }
B.父盒子相对定位，子盒子绝对定位（垂直水平居中）
.container{ width: 600px; height: 500px; position: relative; border: 1px solid black; } .box{ width:100px; height: 200px; background: beige; position: absolute; top:0; left:0; right:0; bottom:0; margin: auto; }
C.通过margin控制
.container{ width: 600px; height: 500px; border: 1px solid black; } .box{ width:100px; height: 200px; margin: 150px auto; background: beige; }
2.子盒子不固定宽高，父盒子默认100%table
A.通过table-cell（要配合display：table；table-row【不必须】；只有一行一列父盒子百分比不起作用，当多行才起作用）----（垂直水平居中）
html,body{ width: 100%; height: 100%; display: table; } .container{ display: table-cell; /*width和height设百分比是不起作用的，单行单列相当于单元格都是100%撑满盒子表格的*/ /* 70%;*/ /*height: 80%;*/ border: 1px solid black; vertical-align: middle; } .box{ width:50%; height: 50%; background: beige; margin: 0 auto; }
问题table-cell草案：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>center</title> <style> html, body { width: 100%; height: 100%; } .fa { width: 500px; height: 300px; display: table; } .tr1{ display: table-row; height: 30%; } .td1 { display: table-cell; width: 20%; border: 1px solid black; vertical-align: middle; padding: 5px; } .td2 { display: table-cell; width: 70%; border: 1px solid black; vertical-align: middle; padding: 5px; } .td3 { display: table-cell; border: 1px solid black; vertical-align: middle; padding: 5px; } .tr2{ display: table-row; } .th{ display: table-cell; border: 1px solid red; } </style> </head> <body> <div class="fa"> <div class="tr1"> <div class="td1"> <div class="box">td1</div> </div> <div class="td2"> <div class="box">td2</div> </div> <div class="td3"> <div class="box">td3</div> </div> </div> <div class="tr2"> <div class="th"> <div class="box">td1</div> </div> <div class="th"> <div class="box">td2</div> </div> <div class="th"> <div class="box">td3</div> </div> </div> </div> </body> </html>
3.父盒子，子盒子，固定or不固定均可
A.flex布局（有兼容问题）--（水平垂直居中）
html,body{ width: 100%; height: 100%; display: table; } .container{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 80%; height: 70%; /* 600px;*/ /*height: 500px;*/ border: 1px solid #000; margin: auto; } .box{ /* 200px;*/ /*height: 200px;*/ width: 50%; height: 50%; background-color: #0ff; }
B.translate(webkit兼容问题) --（水平垂直居中）
html,body{ width: 100%; height: 100%; display: table; } .container{ position: relative; /* 600px;*/ /*height: 600px;*/ width: 70%; height: 100%; border: 1px solid #000; margin: auto; } .box{ position: relative; /*相对于父元素位置*/ top: 50%; left: 50%; /* 200px;*/ /*height: 200px;*/ width: 40%; height: 40%; /*相对于自身元素*/ transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); background-color: #0ff; }
4.子盒子不确定宽高，父盒子固定or不固定均可
A.定位（水平垂直居中）
html,body{ width: 100%; height: 100%; display: table; } .container{ position: relative; /* 600px;*/ /*height: 500px;*/ width: 100%; height: 100%; border: 1px solid #000; margin: auto; } .box{ position: absolute; left: 30%; right: 30%; top: 30%; bottom: 30%; background-color: #0ff; }
5.button居中
默认button垂直居中，所以只要控制水平居中。例如margin：0 auto；