CSS:水平垂直居中
2018-05-02 本文已影响0人
肆意咯咯咯
1.使用table-cell+vertical-align
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width:10%;
height:500px;
background-color:green;
display: table-cell;
vertical-align: middle;/*垂直居中,必须为table元素*/
text-align: center;/*水平居中,需将块级元素转化成内联块*/
}
.child{
width:50%;
height:50%;
display:inline-block;
background-color:pink;
/*vertical-align: middle;*/
}
</style>
</head>
<body>
<div class="parent">
<div class="child">DEMO需转换成内联块</div>
</div>
</body>
</html>
原理：table-cell设置宽度，会出现一些问题，
table-cell宽度问题
2.使用absolute+transform
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width:100%;
height:500px;
background-color:green;
position:relative;
}
.child{
width:50%;
height:50%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">DEMO</div>
</div>
</body>
</html>
3.使用absolute+margin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width:100%;
height:500px;
background-color:green;
position:relative;
}
.child{
width:50%;
height:50%;
background-color:pink;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">DEMO</div>
</div>
</body>
</html>
4.使用absolute+margin负边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width:100%;
height:500px;
background-color:green;
position:relative;
}
.child{
width:50%;
height:50%;
background-color:pink;
position:absolute;
top:50%;
left:50%;
margin-left:-25%;
margin-top:-125px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">DEMO</div>
</div>
</body>
</html>
注意：需要明确子框的宽高；
5.使用flex+align-items+justify-content
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width:100%;
height:500px;
background-color:green;
display:flex;
align-items: center;
justify-content: center;
}
.child{
width:50%;
height:50%;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">DEMO</div>
</div>
</body>
</html>
6.calc计算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*绝对定位，clac计算位置*/
.calc{
width:500px;
height:120px;
background-color:green;
position: relative;
}
.innerBox{
width:200px;
height:50px;
background-color:red;
position: absolute;
left:-webkit-calc((500px - 200px)/2);
top:-webkit-calc((120px - 50px)/2);
left:-moz-calc((500px - 200px)/2);
top:-moz-calc((120px - 50px)/2);
left:calc((500px - 200px)/2);
top:calc((120px - 50px)/2);
}
</style>
</head>
<body>
<p class="outerBox calc">
<p class="innerBox">calc</p>
</p>
</body>
</html>
