如何实现一个块级元素的水平垂直居中
1、利用 display:table-cell;属性来实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table-cell居中</title>
<style type="text/css">
.content{
border: 1px solid blue;
display: table;
margin: 50px auto;
}
.table{
height: 300px;
width: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
}
.box{
height: 150px;
width: 150px;
background: #109D71;
margin: 0 auto;
display: table;
}
.word{
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="content">
<div class="table">
<div class="box">
<div class="word">
垂直水平居中
</div>
</div>
</div>
</div>
</body>
</html>
2、flex 弹性布局
详情查看https://www.runoob.com/w3cnote/flex-grammar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
.content {
width: 300px;
height: 300px;
margin: 50px;
border: 1px solid #109D71;
display: flex;
align-items: center;
justify-content: center;
}
.box{
width: 150px;
height: 150px;
background-color: #109D71;
text-align: center;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
水平垂直居中
</div>
</div>
</body>
</html>
3、利用绝对定位，让元素脱离普通文档流，再结合margin：auto。
<!DOCTYPE html>
<head>
<title>absolute居中</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.content {
width: 300px;
height: 300px;
border: 1px solid #109D71;
position:relative;
}
.box {
margin:auto;
width: 100px;
height: 100px;
background: #109D71;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
</div>
</div>
</body>
</html>
4、absolute+margin 通过计算元素宽高实现居中
<!DOCTYPE html>
<head>
<title>absolute+margin计算元素宽高判断居中</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.content {
width: 300px;
height: 300px;
border: 1px solid #109D71;
position: relative;
}
.box {
position: absolute;
width: 100px;
height: 100px;
/* top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px; */
top: calc(50% - 50px);
left: calc(50% - 50px);
background: #109D71;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
</div>
</div>
</body>
</html>
5、absolute + translate ，通过translate将元素移动自身的50%,50%，实现水平垂直居中。
<!DOCTYPE html>
<head>
<title>absolute+translate</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.content {
width: 300px;
height: 300px;
border: 1px solid #109D71;
position: relative;
}
.box {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
/* 渐进增强 */
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: #109D71;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
</div>
</div>
</body>
</html>
