文章目录
- CSS 居中总结
- 水平居中
- 文字水平居中
- 块元素水平居中
- 行内元素和行内块元素水平居中
- 垂直居中
- 文字垂直居中
- 单行文字
- 多行文字
- 块元素居中
- 块元素居中（方法二）
- 块元素居中（方法三）
- 行内元素、行内块元素居中
- flex居中
CSS 居中总结
水平居中
文字水平居中
原理
父元素 {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {
height: 100px;
text-align: center;
border: 1px dashed red;
margin-top: 10px;
}
</style>
</head>
<body>
<div>hello world </div>
</body>
</html>
块元素水平居中
原理
元素 {
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {
margin: 0 auto;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
行内元素和行内块元素水平居中
原理
父元素 {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {
text-align: center;
height: 100px;
text-align: center;
border: 1px dashed red;
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<a href="#">hello world</a>
</div>
<div>
<img src="img/logo.png" alt="">
</div>
</body>
</html>
垂直居中
文字垂直居中
单行文字
原理
父元素 {
height: 高度值;
line-height: 高度值;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {
height: 100px;
line-height: 100px;
border: 1px dashed red;
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>
多行文字
原理
父元素 {
display: table-cell;
vertical-align: middle;
}
span {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p {
display: table-cell;
vertical-align: middle;
width: 400px;
height: 200px;
border: 1px dashed red;
}
span {
display: inline-block;
}
</style>
</head>
<body>
<p>
<span>这是一堆文本这是一堆文本这是一堆文本<br />
这是一堆文本这是一堆文本<br />
这是一堆文本这是一堆文本这是一堆文本这是一堆文本这是一堆文本</span>
</p>
</body>
</html>
块元素居中
原理
使用position定位元素，这种方式适用于block元素。
父元素 {
position: relative;
}
子元素 {
position: absolute;
top: 50%;
left: 50%;
margin-top: height值一半的负值;
margin-left: width值一半的负值;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#father {
position: relative;
width: 200px;
height: 160px;
border: 1px solid gray;
}
#son {
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -50px;
width: 100px;
height: 60px;
background-color: Red;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
块元素居中（方法二）
原理
用translate替代margin。
元素 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#father {
position: relative;
width: 200px;
height: 160px;
border: 1px solid gray;
}
#son {
width: 100px;
height: 60px;
background-color: Red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
块元素居中（方法三）
原理
元素 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#father {
position: relative;
width: 200px;
height: 160px;
border: 1px solid gray;
}
#son {
width: 100px;
height: 60px;
background-color: Red;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
行内元素、行内块元素居中
使用table-cell属性，这种方式适用于inline元素、inline-block元素。
原理
父元素 {
display:table-cell;
vertical-align:middle;
}
子元素 {
vertical-align:middle;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 160px;
border: 1px solid red;
margin-top: 10px;
}
img {
vertical-align: middle;
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div>
<a href="#">hello world</a>
</div>
<br>
<div>
<img src="img/a.png" alt="" />
</div>
</body>
</html>
flex居中
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#father {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 160px;
border: 1px solid gray;
}
#son {
width: 100px;
height: 60px;
background-color: Red;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
