前端开发者| 腾讯前端开发电话面试题 |
| 浙江日报前端开发面试 |
| 前端开发面试常问问题 |
<h3>第一种：position定位方式实现垂直水平居中</h3>html 代码
<div class=”box1″></div>
<style type=”text/css”>
.box1 {
width: 400px;
height: 200px;
background: red;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -200px;
}
</style>
<h3>第二种：position定位方式实现垂直水平居中</h3>
html 代码
<div class=”box2″></div>
<style type=”text/css”>
.box2 {
width: 500px;
height: 300px;
background: green;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<h3>第三种：position定位方式实现垂直水平居中</h3>
html 代码
<div class=”box3″></div>
<style type=”text/css”>
.box3 {
width: 400px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
第四种：flex伸缩盒子的方式
html 代码
<div class=”box4″>第四种：flex伸缩盒子的方式</div>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
display: flex;
}
.box4 {
width: 400px;
height: 200px;
background: red;
margin: auto;
}
</style>
第五种方法
html 代码
<div class=”box5″><span>111</span></div>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
.box5 {
width: 500px;
height: 500px;
background: red;
vertical-align: middle;
display: table-cell;
/*垂直居中*/
text-align: center;
/*水平居中*/
}
.box5 span {
display: inline-block;
width: 100px;
height: 100px;
background: green;
text-align: left;
}
</style>
第六种方法
html 代码
<div class=”box6″>这是一种垂直水平居中的方法</div>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
text-align: center;
}
.box6 {
width: 400px;
height: 200px;
background: red;
display: inline-block;
vertical-align: middle;
text-align: left;
}
body:before {
content: ”;
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
</style>
第七种方法
html 代码
<div class=”box7″></div>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
/*水平居中*/
align-items: center;
/*垂直居中*/
}
.box7 {
width: 400px;
height: 200px;
background: red;
}
</style>
| 前端开发面试项目 |
| web前端开发面试题目 |
| web前端开发面试知乎 |
» 本文来自：前端开发者 » 《前端开发CSS实现垂直水平居中的7种方式实例汇总》
» 本文链接地址：https://www.rokub.com/7967.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册