盒子的水平居中和垂直居中
text-align:center一般是用来规定文本和内联元素的水平居中对齐,如果想要让块级水平居中对齐,一般使用margin:0px auto来实现
- 单独父盒子垂直居中直接给父盒子写
margin:垂直像素 auto;
- 想让嵌套盒子居中
----方案一:给嵌套的盒子写:margin:垂直像素 auto;
之后给父盒子写overflow:hidden
清除盒子塌陷问题 不清楚父盒子随着嵌套的盒子一起下来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套盒子</title>
<style>
*{
padding:0px;
margin: 0px;
}
.father{
width: 400px;
height: 400px;
background-color: red;
margin: 100px auto;
overflow: hidden;
}
.son{
width: 300px;
height: 200px;
background:pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<div class="son1"></div>
</div>
</div>
</body>
</html>
—方案二:
给父盒子设置内边距:padding:上 左 下 右;
它会撑大盒子的宽度之后清除用box-sizing:border-box;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套盒子</title>
<style>
*{
padding:0px;
margin: 0px;
}
.father{
width: 400px;
height: 400px;
background-color: red;
margin: 100px auto;
padding: 100px;
box-sizing: border-box;
}
.son{
width: 200px;
height: 200px;
background:pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<div class="son1"></div>
</div>
</div>
</body>
</html>
方案三:定位的盒子如何水平居中
position:relative;
left:50%;
margin-left:-他的一半;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套盒子</title>
<style>
*{
padding:0px;
margin: 0px;
}
.father{
width: 400px;
height: 400px;
background-color: red;
margin: 200px auto;
}
.son{
width: 200px;
height: 200px;
background:pink;
//水平居中
position: relative;
left:50%;
margin-left: -100px;
垂直的margin-top没有用得给父元素加一个overflow:hidden;
top:50%;
margin-top:-100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<div class="son1"></div>
</div>
</div>
</body>
</html>
—方案四:
可以利用定位来让盒子居中
子绝夫相
1,line-height: 100px; 只对文本有效果,对定宽高的div是没有用的。所以在文本水平垂直居中时使用。
- text-align
我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的。
如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
}
div{
width: 500px;
height: 300px;
border: 1px solid #000;
text-align: center;
line-height:300px
}
</style>
</head>
<body>
<div> 小长假亲·牛仔裤不能创建·</div>
</body>
</html>