css居中方式方法很多，每一种方法并不固定于解决某一种情况，很多是相互融合的。总之，
1、行内元素水平居中用text-align:center；
2、行内元素垂直居中用inline-height=height、vertical-align:middle;
3、块级元素、浮动元素水平垂直居中，已知宽高是通过position+margin，未知宽高时通过position+transform:translate();
4、绝对定位的元素通过margin:auto居中；
5、弹性布局是通用的居中方法。
1、水平居中
1.1内联元素水平居中
给包含元素设置text-align：center可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width: 300px;
height:200px;
background-color: #fcc;
//核心代码
text-align: center;
}
</style>
<body>
<div class="wrap">
<span>haha</span>
</div>
</body>
</html>复制代码1.2块级元素水平居中
设置需要居中的元素的宽度和高度，然后把margin-left和margin-right设成auto，可以使块级元素水平居中。
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width: 300px;
height:200px;
background-color: #fcc;
}
//核心代码
.div{
width: 38px;
height:20px;
margin: 0 auto;
}
</style>
<body>
<div class="wrap">
<div class="div">haha</div>
</div>
</body>
</html>复制代码1.3多块元素水平居中
1.3.1利用inline-block
如果一行中有两个或者两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width: 300px;
height:200px;
//核心代码
text-align: center;
background-color: #fcc;
}
//核心代码
.div{
display: inline-block;
}
</style>
<body>
<div class="wrap">
<div class="div">haha</div>
<div class="div">hehe</div>
</div>
</body>
</html>复制代码1.3.2利用display:flex
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width: 300px;
height:200px;
background-color: #fcc;
//核心代码
display: flex;
justify-content: center;
}
</style>
<body>
<div class="wrap">
<div class="div">haha</div>
<div class="div">hehe</div>
</div>
</body>
</html>复制代码1.4浮动元素水平居中
1.4.1已知宽度的浮动元素水平居中
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width: 300px;
height:200px;
background-color: #fcc;
}
/*核心代码*/
.div{
background-color: #f66;
float: left;
position: relative;
left: 50%;
width: 50px;
margin-left: -25px;
}
</style>
<body>
<div class="wrap">
<div class="div">haha</div>
</div>
</body>
</html>复制代码
1.4.2未知宽度的浮动元素水平居中
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width: 300px;
height:200px;
background-color: #fcc;
}
/*核心代码*/
.div{
background-color: #f66;
float: left;
position: relative;
left: 50%;
transform: translateX(-50%);
}
</style>
<body>
<div class="wrap">
<div class="div">haha</div>
</div>
</body>
</html>复制代码
1.4.3通用方法 flex
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width: 300px;
height:200px;
background-color: #fcc;
display: flex;
justify-content: center;
}
/*核心代码*/
.div{
background-color: #f66;
float: left;
}
</style>
<body>
<div class="wrap">
<div class="div">haha</div>
</div>
</body>
</html>复制代码1.5绝对定位元素水平居中
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width: 300px;
height:200px;
background-color: #fcc;
position: relative;
}
/*核心代码*/
.div{
background-color: #f66;
position: absolute;
width:50px;
left: 0;
right: 0;
margin: 0 auto;
}
</style>
<body>
<div class="wrap">
<div class="div">haha</div>
</div>
</body>
</html>复制代码2、垂直居中
2.1单行内联元素垂直居中
通过设置内联元素的line-height等于块级元素的height，从而是元素垂直居中。
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width: 300px;
height:200px;
background-color: #fcc;
}
.span{
//核心代码
line-height: 200px;
}
</style>
<body>
<div class="wrap">
<span class="span">haha</span>
</div>
</body>
</html>复制代码2.2多行元素垂直于居中
2.2.1利用表格布局
利用表格布局的vertical-align：middle可以实现子元素的垂直居中。
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width: 300px;
height:200px;
background-color: #fcc;
//核心代码
display: table;
}
//核心代码
.div{
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<div class="wrap">
<div class="div">haha</div>
<div class="div">hehe</div>
</div>
</body>
</html>复制代码2.2.2利用flex布局
利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义，在较老的浏览器存在兼容性问题。
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width: 300px;
height:200px;
background-color: #fcc;
//核心代码
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
<body>
<div class="wrap">
<div class="div">haha</div>
<div class="div">hehe</div>
</div>
</body>
</html>复制代码2.3块级元素垂直居中
2.3.1固定高度的块级元素
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width: 300px;
height:200px;
background-color: #fcc;
//核心代码
position: relative;
}
//核心代码
.div{
height: 50px;
background-color: #f66;
position: absolute;
top:50%;
margin-top:-25px;
}
</style>
<body>
<div class="wrap">
<div class="div">haha</div>
</div>
</body>
</html>复制代码2.3.2未知高度的块级元素
当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width: 300px;
height:200px;
background-color: #fcc;
//核心代码
position: relative;
}
//核心代码
.div{
background-color: #f66;
position: absolute;
top:50%;
transform: translateY(-50%);
}
</style>
<body>
<div class="wrap">
<div class="div">haha</div>
</div>
</body>
</html>复制代码3、水平垂直居中
3.1固定宽高元素水平垂直居中
通过margin：auto使元素水平垂直居中。
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width: 300px;
height:200px;
background-color: #fcc;
//核心代码
position: relative;
}
//核心代码
.div{
background-color: #f66;
width:100px;
height:50px;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
<body>
<div class="wrap">
<div class="div">haha</div>
</div>
</body>
</html>复制代码3.2未知宽高元素水平垂直居中
利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width: 300px;
height:200px;
background-color: #fcc;
//核心代码
position: relative;
}
//核心代码
.div{
background-color: #f66;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div class="wrap">
<div class="div">haha</div>
</div>
</body>
</html>复制代码3.3利用弹性布局
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width: 300px;
height:200px;
background-color: #fcc;
//核心代码
display: flex;
justify-content: center;
align-items: center;
}
.div{
background-color: #f66;
}
</style>
<body>
<div class="wrap">
<div class="div">haha</div>
</div>
</body>
</html>复制代码
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
