水平居中
1、text-align: center;
常用于文字居中显示
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
text-align: center;
}
</style>
</head>
<body>
<p>Hello World</p>
</boy>
</html>
2、margin:0 auto
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrap{
width: 100%;
height: 500px;
background-color: red;
}
.center{
width: 200px;
height: 200px;
background-color: blue;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="center"></div>
</div>
</boy>
</html>
3、绝对定位
适用于宽度明确的元素
position: absolute;
left: 50%;
/* 设置自己宽度的一半 */
margin-left: -100px;
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrap{
width: 100%;
height: 500px;
background-color: red;
position: relative;
}
.center{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
left: 50%;
/* 设置自己宽度的一半 */
margin-left: -100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="center"></div>
</div>
</boy>
</html>
垂直居中
1、height和line-height的值设置成一样
适合文字垂直居中
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
background-color: pink;
height: 200px;
line-height: 200px;
}
</style>
</head>
<body>
<p>Hello World</p>
</boy>
</html>
2、绝对定位
position: absolute;
top: 50%;
/* 设置自己高度的一半 */
margin-top: -100px;
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrap{
width: 100%;
height: 500px;
background-color: red;
position: relative;
}
.center{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 50%;
/* 设置自己高度的一半 */
margin-top: -100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="center"></div>
</div>
</boy>
</html>
