一、水平居中
1、水平居中 text-align: center;
在父元素上设置 text-align: center;使文字/图片水平居中。
代码：
<div class="div1">文字文字</div>
<style>
.div1{
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
}
</style>
效果：
text-align: center;居中
2、水平居中的 margin
原理：两侧auto，则平分剩余空间，相当于水平居中。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css居中</title>
<style>
.div2{
width: 600px;
border: 1px solid black;
}
.div1{
width: 100px;
height: 100px;
border: 1px solid black;
margin: 0 auto;
/*也可以这样写*/
/*margin-left: auto;*/
/*margin-right: auto;*/
}
</style>
</head>
<body>
<div class="div2">
<div class="div1">文字文字</div>
</div>
</body>
</html>
效果：
margin水平居中
二、水平垂直居中
1、水平垂直居中：padding与text-align
代码：
<style>
.div1{
width: 200px;
border: 1px solid black;
padding: 50px 0;
text-align: center;
background: #eee;
}
</style>
<div class="div1">
<p>文字文字1</p>
<p>文字文字2</p>
</div>
效果：
padding与text-align
2、水平垂直居中：定位和外边距（position和margin）
代码：
<style>
.div2{
border: 1px solid black;
width: 400px;
height: 400px;
position: relative;/*设置相对定位，让div1相对于div2来定位*/
/*不设置div1侧相对body或者HTML来定位*/
}
.div1{
width: 200px;
height: 200px;
border: 1px solid black;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
/*也可以这样*/
/*top: 0;*/
/*left: 0;*/
/*right: 0;*/
/*bottom: 0;*/
/*margin: auto;
}
</style>
<div class="div2">
<div class="div1">
<p>文字文字1</p>
<p>文字文字2</p>
</div>
</div>
效果：
position实现垂直居中
3、水平垂直居中：vertical-align 和text-align
代码：
<style>
.div2{
border: 1px solid black;
width: 400px;
height: 400px;
text-align: center;
}
.div2:before{
content: ' ';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.div2 img{
height: 100px;
width: 100px;
vertical-align: middle;
}
</style>
<div class="div2">
</div>
效果：
vertical-align 和text-align
4、水平垂直居中：diplay:table-cell和text-align: center;
代码：
.div2{
border: 1px solid black;
width: 400px;
height: 400px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.div2 img{
height: 100px;
width: 100px;
}
<div class="div2">
</div>
效果：
table-cell和text-align
5、水平垂直居中：position和transfrom
代码：
<style>
.div2{
border: 1px solid black;
width: 400px;
height: 400px;
position: relative;
}
.div1{
border: 1px solid black;
background: darkred;
height: 100px;
width: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<div class="div2">
<div class="div1"></div>
</div>
效果：
position和transfrom
6、水平垂直居中：display: flex
代码：
<style>
.div2{
border: 1px solid black;
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items:center;
}
img{
height: 100px;
width: 100px;
}
</style>
<div class="div2">
</div>
效果：
display: flex
参考：http://book.jirengu.com/fe/前端基础/CSS/元素居中.html
- 注：自由转载-非商用-非衍生-保持署名
网友评论