1、水平居中：
（1）行内元素
设置父元素：
text-align:center;
<head>
<style type="text/css">
#out{
width:200px;
height:100px;
background-color:red;
text-align:center;
}
</style>
</head>
<body>
<div id="out">
<span>CSS</span>
</div>
</body>（2）确定宽度的块级元素
设置子元素：
width:百分比或数值;
margin:0 auto;
注意：必须设置width，否则margin:0 auto不能实现水平居中。
<head>
<style type="text/css">
#out{
width: 400px;
height: 200px;
background: red;
}
#in{
width: 50%;
height: 50%;
background: yellow;
margin:0 auto;
}
</style>
</head>
<body>
<div id="out">
<div id="in"></div>
</div>
</body> （3）不确定宽度的块级元素
1）设置父元素和子元素：
设置父元素：
text-align:center;
设置子元素：
display:inline-block或inline;
<head>
<style type="text/css">
#out{
width:200px;
height:100px;
background-color:red;
text-align:center;
}
#in{
background-color:yellow;
display:inline-block;
}
</style>
</head>
<body>
<div id="out">
<div id="in">Hello</div>
</div>
</body>2）设置子元素：
display:table;
margin:0 auto;
<head>
<style type="text/css">
#out{
width:200px;
height:100px;
background-color:red;
}
#in{
background-color:yellow;
display:table;
margin:0 auto;
}
</style>
</head>
<body>
<div id="out">
<div id="in">Hello</div>
</div>
</body>2、垂直居中
（1）行内元素
设置子元素：
line-height:父元素height;
<head>
<style type="text/css">
#out{
width:200px;
height:100px;
background-color:red;
}
span{
line-height:100px;
}
}
</style>
</head>
<body>
<div id="out">
<span>CSS</span>
</div>
</body>（2）非行内元素
设置父元素：
position:relative;
设置子元素：
position:absolute;
margin-top:(父元素height-子元素height)/2;
<head>
<style type="text/css">
#out{
position: relative;
width: 200px;
height: 100px;
background: red;
}
#in{
position: absolute;
width: 100px;
height: 50px;
background: yellow;
margin-top: 25px;
}
</style>
</head>
<body>
<div id="out">
<div id="in"></div>
</div>
</body>3、水平和垂直居中
（1）在浏览器窗口中水平和垂直居中
设置：
width:数值（不能是百分比）;
height:数值（不能是百分比）;
position:fixed;
left:50%;
top:50%;
margin-top:-height/2;
margin-left:-width/2;
<head>
<style type="text/css">
#out{
position: fixed;
width: 800px;
height: 400px;
background: red;
margin: -200px 0 0 -400px;
left: 50%;
top:50%;
}
}
</style>
</head>
<body>
<div id="out"></div>
</body>（2）子元素在父元素中水平和垂直居中
1）利用 flex 布局，实际使用时应考虑兼容性。
父元素：
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
<head>
<style type="text/css">
#out{
width: 400px;
height: 200px;
background: red;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
#in{
width: 200px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="out">
<div id="in"></div>
</div>
</body>2）未知子元素的宽高，利用transform属性。
父元素：
position:fixed;
子元素：
width:**%;
height:**%;
position:absolute或relative;
left:50%;
top:50%;
transform: translate(-50%,-50%);
<head>
<style type="text/css">
#out{
position: fixed;
width: 400px;
height: 200px;
background: red;
}
#in{
width: 50%;
height: 50%;
background: yellow;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div id="out">
<div id="in"></div>
</div>
</body>父元素：
position:fixed;
子元素：
width:数值;
height:数值;
padding:(可有可无);
position:absolute或relative;
left:50%;
top:50%;
margin-left:-(width+2*padding)/2;
margin-top:-(height+2*padding)/2;
<head>
<style type="text/css">
#out{
position: fixed;
width: 400px;
height: 200px;
background: red;
}
#in{
width: 100px;
height: 50px;
background: yellow;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -70px; /* (width + padding)/2 */
margin-top: -45px; /* (height + padding)/2 */
}
</style>
</head>
<body>
<div id="out">
<div id="in"></div>
</div>
</body>