找回密码
当前位置：前端开发者 > CSS > 正文

前端开发CSS实现垂直水平居中的7种方式实例汇总

2019-01-23 20:10:00 分类：CSS / 面试 阅读(1193) 评论(0)
腾讯前端开发电话面试题
浙江日报前端开发面试
前端开发面试常问问题

<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
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论