css垂直居中的方法有很多,今天没事干,就整理了一下
一、块级元素的垂直水平居中
1.固定宽高+position:absolute+margin:auto实现垂直水平居中(灰色区域为浏览器页面,红色为当前元素)
1)来看一个小栗子(只设置margin属性):我们发现只设置margin属性的时候实现水平居中
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background-color: red;
width: 100px;
height: 100px;
margin: auto; /*设置margin属性*/
}
</style>
</head>
<body>
<div>1</div>
</body>
这是效果图:
2)当我们给css加下面这行代码时:我们发现原来水平居中的元素又回到了原点
position: absolute;
效果图如下:
3)当我们给css样式加上下面的代码时发现元素实现了垂直加水平居中
top:0;
left:0;
right:0;
bottom:0;
效果图如下:
是不是很神奇,其实主要是因为当给元素绝对定位的时候,元素脱离当前的文档流,独占一整个页面,当设置了top等值时,相当于给当前页面设置边框
2.在父元素里面的子元素实现居中,并且让父元素也实现居中
来看下面的例子:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color: grey;
}
div{
background-color: black;
width:500px;
height: 300px;
margin: auto; /*这款设置当前元素居中,并且绝对定位和top等值都让当前元素居中*/
display: flex; /*设置弹性盒模型,并且设置子元素的对齐方式为居中*/
justify-content: center;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
p{
background-color: red;
margin: auto; /*加上这句代码以后就成功的垂直水平居中了*/
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<p>1</p>
</div>
</body>
注意:块级元素的垂直居中也可以给父元素设置display:table-cell和vertical-algin:middle
二、行级元素的垂直水平居中
1.单行文本元素的时候,使用text-algin:center;和line-height进行垂直水平居中
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background-color: grey;
height:50px;
width: 200px;
text-align: center; /*让在这个元素里面的内容水平居中显示*/
}
span{
background-color: pink;
line-height: 50px; /*让文本元素的行高等于父元素的高,进行垂直居中*/
}
</style>
</head>
<body>
<div>
<span>我能不能居中啊</span>
</div>
</body>
效果图:
2.多行文本居中(垂直居中:dispaly:table-cell;+vertical:middle;水平居中:margin:auto):
看下面的小栗子
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background-color: grey;
height:300px;
width: 300px;
text-align: center; /* 使元素里面的内容水平居中 */
display: table-cell; /* 以下两句代码是元素按照table表格显示,并垂直居中 */
vertical-align: middle;
}
span{
background-color: pink;;
}
</style>
</head>
<body>
<div>
<span>我能不能居中啊</span><br>
<span>我能不能居中啊</span><br>
<span>我能不能居中啊</span><br>
<span>我能不能居中啊</span><br>
</div>
</body>