核心提示：1、水平居中：(1)行内元素设置父元素：text-align:centerheadstyle type=text/css#out{width:200px;height:100px;background...
1、水平居中：
(1)行内元素
设置父元素：
text-align:center
<head>
<style type="text/css">
#out{
width:200px;
height:100px;
background-color:red;
text-align:center;
}
</style>
</head>
<body>
<p id="out">
<span>CSS</span>
</p>
</body>
(2)非行内元素
a、设置子元素：
width
margin:auto
<head>
<style type="text/css">
#out{
width:200px;
height:100px;
background-color:red;
}
#in{
width:50px;
height:25px;
background-color:yellow;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<p id="out">
<p id="in"></p>
</p>
</body>
b、设置父元素和子元素
设置父元素：
text-align:center
设置子元素：
display:inline-block
<head>
<style type="text/css">
#out{
width:200px;
height:100px;
background-color:red;
text-align:center;
}
#in{
width:50px;
height:25px;
background-color:yellow;
display:inline-block;
}
</style>
</head>
<body>
<p id="out">
<p id="in"></p>
</p>
</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>
<p id="out">
<span>CSS</span>
</p>
</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>
<p id="out">
<p id="in"></p>
</p>
</body>
3、水平和垂直居中
(1)在浏览器窗口中水平和垂直居中
设置：
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>
<p id="out"></p>
</body>
(2)子元素在父元素中水平和垂直居中
父元素：
position:fixed
子元素：
position:absolute
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>
<p id="out">
<p id="in"></p>
</p>
</body>
