面试到css的时候,人们经常会问给你一个div固定宽度.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container{
position: relative;
width: 400px;
height: 400px;
border: 1px solid red;
}
.container .center{
width: 80px;
height: 80px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="center"></div>
</div>
</body>
</html>
让它左右居中上下居中。
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -40px;
}
如果你这样回答,面试官又有可能会问:不知道div的宽高怎么办?
.container .center{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translate(-50%, -50%); //简洁的写法
}
.container .center{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
这个两个方法可以,轮流注释掉看看效果。
还有一个给父级div加伪类的方法!同时给父级div价格text-align:center
.container:after{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.container .center{
display: inline-block;
vertical-align: middle;
}
当然css3给我们送来一个好的助攻,就是flex布局!只需要给父级div加三句话:
.container{
position: relative;
width: 400px;
height: 400px;
border: 1px solid red;
justify-content:center;
align-items:center;
display:-webkit-flex;
}
总共是五种方法,大家各取所需吧!如果你有更好的方法,please tell me without hesitation! 感觉回到的写英语作文的时代了!
以下是全部代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container{
position: relative;
width: 400px;
height: 400px;
border: 1px solid red;
/*与方法四配合使用*/
/*text-align: center;*/
/*方法五*/
/*justify-content:center;
align-items:center;
display:-webkit-flex;*/
}
.container .center{
width: 80px;
height: 80px;
background-color: #ccc;
}
/*方法一*/
.container .center{
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -40px;
}
/*方法二*/
/*.container .center{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translate(-50%, -50%); //简洁的写法
}*/
/*方法三*/
/*.container .center{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}*/
/*方法四*/
/*给container加一个text-aligin:center*/
/*.container:after{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.container .center{
display: inline-block;
vertical-align: middle;
}*/
</style>
</head>
<body>
<div class="container">
<div class="center"></div>
</div>
</body>
</html>
img p居中代码请戳我