水平居中和垂直居中

本章介绍几种常见的水平居中和垂直居中的实现方式

<!DOCTYPE html>
<html>
<head>
    <title>水平居中和垂直居中</title>
    <meta charset="utf-8">
</head>
<style type="text/css">
    .box {   /* 在一个基础的盒子里面显示效果 */
        position: relative;
        float: left;
        width: 250px;
        height: 200px;
        margin: 20px; 
        border: 1px solid #000;
    }
    
    .lev1 { 
        width: 150px; 
        margin: 0 auto; 
        background-color: pink; 
    }

    .box .lev2 { 
        position: absolute; 
        width: 150px; 
        height: 100px; 
        margin: auto; 
        left: 0;    
        right: 0;   /* 增加 top 和 bottom 为 0 会使其水平垂直居中 */
        background-color: pink; 
    }

    .box .ver-lev1 {
        position: relative;     /* 相对定位或绝对定位均可 */
        width: 150px;
        height: 100px;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -75px;        /* 外边距为自身宽高的一半 */
        background-color: pink;       
    }

    .box .ver-lev2 {
        position: absolute;     /* 相对定位或绝对定位均可 */
        width: 150px;
        height: 100px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);  /* translate 定义转换, 横纵坐标转换 -50% */
        background-color: pink;     
    }

    .flex {
        display: flex;
        align-items: center;        /* 垂直居中  */
        justify-content: center;    /* 水平居中 */
        width: 400px;
        height: 200px;
        border: 1px solid #000;
        margin: 20px;
    }

    .flex .ver-lev3 {
        width: 300px;
        height: 50px;
        background-color: pink;
    }

    .table-cell {
        display: table-cell;
        vertical-align: middle;
        width: 400px;
        height: 200px;
        /* margin: 20px; */   /* table-cell没有margin值 */
        border: 1px solid #000; 
    }

    .table-cell .ver1 {
        width: 300px;
        height: 50px;
        text-align: center;
        background-color: pink;
    }
</style>
<body>
    <div class="box"><div class="lev1">水平居中: 给div设置一个宽度, 然后添加 margin:0 auto 属性</div></div>
    <div class="box"><div class="lev2">水平居中: 让绝对定位的 div 居中</div></div>
    <div class="box"><div class="ver-lev1">水平垂直居中: 受限于容器的宽高, 设置层的外边距</div></div>
    <div class="box"><div class="ver-lev2">水平垂直居中: 不受限于容器的宽高, 利用 `transform` 属性 (2D 或 3D 转换)</div></div>
    <div style="clear: left;"></div>  <!-- 清除前面的左浮动 -->
    <div class="flex"><div class="ver-lev3">水平垂直居中: 使用 display 中的 flex 布局 (与 float 或 position 混用会被破坏)</div></div>
    <div class="table-cell"><div class="ver1">垂直居中: 使用 display 中的 table-cell 值 (与 float 或 position 混用会被破坏)</div></div>
</body>
</html>

result.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT大咖说

分享7款超赞的CSS3动画效果,值得你收藏!

今天与大家分享7款顶级的CSS3动画效果,包含了菜单特效、文字特效、图片特效等,另外还有几个表现非常特别的动画,个人觉得非常赞哦。

38130
来自专栏小樱的经验随笔

HTML/CSS/JavaScript学习笔记【持续更新】

HTML <font> 标签 定义和用法 <font> 规定文本的字体、字体尺寸、字体颜色。 实例 规定文本字体、大小和颜色: 1 <font size="3"...

367100
来自专栏HTML5学堂

随心所欲的滚动条,远离产品汪(一)

在我们的开发生活中,相信很多人都会遇到形形色色的项目需求,比如更改浏览器的默认样式,在产品定下需求后给的网页设计图中我们最常遇到的是自定义滚动条的样式,或者当你...

37250
来自专栏Android干货

小程序实践(六):view内部组件排版

     ①、当水平排列的时候  , justify-content:center ; 决定水平居中

12020
来自专栏黑白安全

CSS实现毛玻璃透明效果

其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。

12530
来自专栏闻道于事

表格及布局——0606上午

今天上午学习了表格的应用以及如何用表格进行页面布局。以下面代码为例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

307100
来自专栏前端小叙

css绝对定位如何在不同分辨率下的电脑正常显示定位位置?

有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用。 首先要明白如下几...

44970
来自专栏web

关于border边框重叠颜色设置问题

22940
来自专栏我分享我快乐

一线UI设计师对APP切图尺寸换算指导

工作后,很多同学还是会问到app切图尺寸的问题。今天分享android和iOS的换算分析,希望能帮到工作中的你。 1.在Android的显示模式为mdpi的时...

368140
来自专栏前端知识分享

第18天:京东网页头部制作

一、京东页面制作开始(头部) 1、浮动的盒子宽度由内容定,不需要设置宽度 2、绝对定位不占位置,相对定位占位置

11520

扫码关注云+社区

领取腾讯云代金券