一、水平居中
1、行内元素的水平居中方法
给父元素设置一个text-align:centent。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{
text-align: center;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
2、 确定宽度的块级元素水平居中
设置外边距，margin：0 auto;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{
width: 400px;
height: 400px;
background: red;
margin: 0 auto;
}
</style>
<body>
<div class="box"> </div>
</body>
</html>
3、负外边距
创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。然后，将容器的左外边距值设置为负的容器宽度的一半。这 样即可将该容器固定在页面水平方向的中点。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{
width:400px;
height:400px;
background:red;
position:absolute;
left:50%;
margin-left:-200px;
}
</style>
<body>
<div class="box">
</div>
</body>
</html>
二、垂直居中
1、使用line-height
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{
background: red;
line-height: 50px;
}
</style>
<body>
<div class="box">Text here</div>
</body>
</html>
2、margin
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{
background: red;
width: 400px;
height:400px;
}
.logo{
width: 200px;
height: 200px;
margin-top: 100px;
}
</style>
<body>
<div class="box">
<img class="logo" src="images/logo.jpg" alt=""/>
</div>
</body>
</html>
3、vertical-align
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{
display:table;
}
.div {
display:table-cell;
vertical-align:middle;
background: red ;height: 100px
}
</style>
<body>
<div class="box">
<div class="div">
<p> vertical-align </p>
</div>
</div>
</body>
</html>
4、position:absolute;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{
width: 400px;
height: 400px;
background: red;
position: relative;
}
.div{
position:absolute;
top:50%;
width: 200px;
height:200px;
margin-top:-100px;
background: green;
}
</style>
<body>
<div class="box">
<div class="div"></div>
</div>
</body>
</html>
5.position:absolute
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:70%;
background: red;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
6、在 content 元素外插入一个 div
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{
height:50%;
float:left;
background: red;
margin-bottom:-100px;
}
.div {
clear:both;
width: 200px;
height:200px;
background: green;
position:relative;
}
</style>
<body>
<div class="box"></div>
<div class="div"></div>
</body>
</html>
7、padding
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{
padding: 20px;
background: red;
}
</style>
<body>
<div class="box"> padding </div>
</body>
</html>
时间： 2024-08-05 04:33:16