文章目录
前面或多或少讲过一些水平垂直居中的方法,这里总结一下常用的几种。
水平居中
文本水平居中
多行水平居中意义不大,这里只讲单行文本。设置text-align:center即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本水平居中</title>
<style type="text/css">
div{
width:300px;
height:40px;
background-color: #1E90FF;
text-align:center;
}
</style>
</head>
<body>
<div>单行文本水平居中</div>
</body>
</html>
元素水平居中
行内元素水平居中
和单行文本水平居中方法一致。
块元素水平居中
方法一:将自身的margin-left和margin-right设置成auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
width:300px;
height:80px;
background-color: yellowgreen;
}
.son{
width:200px;
height:70px;
margin:0 auto;
background-color:lightgoldenrodyellow;
text-align:center;
}
</style>
</head>
<body>
<div class="father">
<div class="son">块元素水平居中</div>
</div>
</body>
</html>
方法二:将要水平居中的元素转化为行内元素或行内块元素,父元素将text-align设置成center。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
width:300px;
height:80px;
background-color: yellowgreen;
text-align:center;
}
.son{
width:200px;
height:70px;
background-color:lightgoldenrodyellow;
display:inline-block;
}
</style>
</head>
<body>
<div class="father">
<div class="son">块元素水平居中</div>
</div>
</body>
</html>
方法三:利用flex布局:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
width:300px;
height:100px;
background-color: yellowgreen;
display:flex;
justify-content: center;
}
.son{
background-color: antiquewhite;
width:200px;
height:60px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">k块元素水平居中</div>
</div>
</div>
</body>
</html>
三者方法的运行结果皆如下:
垂直居中
文本垂直居中
单行文本垂直居中
设置height和line-height相等即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
width:240px;
height:80px;
line-height: 80px;;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="father">单行文本垂直居中</div>
</div>
</body>
</html>
多行文本垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
width:120px;
height:90px;
background-color: yellowgreen;
display:table-cell;
vertical-align: middle;
}
.son{
display:inline-block;
}
</style>
</head>
<body>
<div class="father">
<span class="son">多行文本垂直居中
</span>
</div>
</div>
</body>
</html>
元素垂直居中
块元素垂直居中
父元素已知高度
父元素{
position:relative;
}
子元素{
position:absolute;
top:50%;
left:50%;
margin-top:负子元素高度的一半;
margin-left:负子元素宽度的一半;
}
例子如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
position:relative;
width:300px;
height:100px;
background-color: yellowgreen;
}
.son{
background-color: antiquewhite;
width:200px;
height:60px;
position:absolute;
top:50%;
left:50%;
margin-top:-30px;
margin-left:-100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
父元素未知高度
利用flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
width:300px;
height:100px;
background-color: yellowgreen;
display:flex;
align-items: center;
}
.son{
background-color: antiquewhite;
width:200px;
height:60px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
运行结果都如下:
行内块元素垂直居中
和多行文本垂直居中原理一样!就不再赘述了 。