啦啦啦，好了，今天来分享自己的第一个知识点，难得自己还能想起来过来博客园，写写博客的。

　　好了，言归正传，今天分享关于html和css的一个简单的知识点，对于大部分从事前端开发的人员来说可能都是很简单的，但是，对于我这种患有严重健忘症的人还有一些初入前端的小伙伴来说，整理一下可能是有百利而无一害的。

　　今天就简单整理一下前端HTML+CSS实现水平垂直居中的效果

　　一　>>>　已知元素宽高

　　　方法1：

　　　　position:absolute;

　　　　left:0;

　　　　right:0;

　　　　top：0;

　　　　bottom:0;

　　　　margin:auto;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    * {

        margin: 0;

        padding: 0;

    }

    .wrapper {

        width: 400px;

        height: 400px;

        background: rgba(100, 100, 84, .5);

    }

    .inner {

        position: absolute;

        top: 0;

        left: 0;

        bottom: 0;

        right: 0;

        margin: auto;

        width: 100px;

        height: 100px;

        background: #90f5;

    }

    </style>

</head>

<body>

    <div class="wrapper">

        <div class="inner"></div>

    </div>

</body>

</html>

　　

　　　　下面是效果图：

　　

　　ps:测试的时候还有点小翻车呢，不过问题不大，对子元素设置position：absolute后，元素会脱离文档流进行定位，在父元素上加上position：relative就可以了。

　　再贴一张图：

　　　方法2：

　　　　positionn:absolute;

　　　　left , top:50%;

　　　　//包含块必须是容器

　　　　margin-left,margin-top为负的自身宽高的一半

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    * {

        margin: 0;

        padding: 0;

    }

    .block {

        position: absolute;

        top: 50%;

        left: 50%;

        margin-left: -200px;

        margin-top: -200px;

        width: 400px;

        height: 400px;

        background: #0ff;

    }

    </style>

</head>

<body>

    <div class="block"></div>

</body>

</html>

　　　　贴个效果图：

　　二　>>>　元素宽高未知

　　　(当然元素宽高已知的居中方法依旧适用于未知宽高的元素，此处不再赘述)

　　　方法1：　　　

　　　　position:absolute;

　　　　left , top : 50%;

　　　　//包含块必须是为容器

　　　　transform : translate(-50% , -50%);

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    * {

        margin: 0;

        padding: 0;

    }

    .block {

        position: absolute;

        top: 50%;

        left: 50%;

        width: 400px; // 没办法，此处必须指定元素的宽高，不过问题不大，假装不知道好了

        height: 400px;

        transform: translate(-50%, -50%);

        background: #0ff;

    }

    </style>

</head>

<body>

    <div class="block"></div>

</body>

</html>

　　

　　

　　　　运行结果与上图一致，就不再重复贴啦。

　　　　此处，需要关注一个问题，translate（）移动的百分比是相对于元素本身的宽高

　　　方法2：flex布局

　　　　父元素容器display:flex

　　　　align-items : center

　　　　justify-content : conter

　　　　下面是运行效果图：

　　　　flex是CSS3中的属性，因此在移动端构建弹性盒模型时，如果想用flex就必须要考虑浏览器兼容性。

　　三　>>>　单行文本居中

　　　方法1：text-align：center;　　//水平方向居中 （在父元素中设置）

　　　　　　  line-height：$（父元素的高度）//垂直方向居中 （在文本元素中设置）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    * {

        margin: 0;

        padding: 0;

    }

    .block {

        position: absolute;

        top: 50%;

        left: 50%;

        width: 400px; // 没办法，此处必须指定元素的宽高，不过问题不大，假装不知道好了

        height: 400px;

        transform: translate(-50%, -50%);

        background: #0ff;

    }

    </style>

</head>

<body>

    <div class="block"></div>

</body>

</html>

　　　　贴个图：

　　　　2019年，大家都要加油呀！

　　四　>>>　图片元素居中

　　　　图片元素比较特殊，其display属性值为inline-block，意味着图片元素既有块级元素的特性，例如可以指定宽高等，同时具备行级元素的特性。因此，图片的水平垂直居中的实现可以用未知宽高和已

　　　　知宽高元素的居中方式来实现，此处介绍图片元素一种特殊的水平居中方式。

　　　　在图片元素的父元素上加text-align：center

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    * {

        margin: 0;

        padding: 0;

    }

    .wrapper {

        width: 400px;

        height: 400px;

        background: rgba(100, 100, 84, .5);

        text-align: center;

    }

    .text {

        line-height: 400px;

    }

    </style>

</head>

<body>

    <div class="wrapper">

        <span class="text">hello,2019年加油</span>

    </div>

</body>

</html>

　　

　　　　运行效果贴图：

　　　　从网上随便拉了张图，不知道会不会构成侵权呢。不管了，用了再说...

　　　　

　　　　今天一整天都在复习计算机网络，全英文1000页，忽然有点慌了

至此，停笔。

2019-01-04　　00:42:23

HTML+CSS水平垂直居中的更多相关文章

  1. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  2. css水平垂直居中对齐方式

    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...

  3. 把简单做好也不简单-css水平垂直居中

    44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...

  4. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...

  5. css 水平垂直居中总结

    空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...

  6. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  7. CSS水平垂直居中的几种方法

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  8. 常见的几种 CSS 水平垂直居中解决办法

    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...

  9. 介绍一种css水平垂直居中的方法（非常好用！）

    这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...

  10. css水平垂直居中

    margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...

随机推荐

  1. Linux基础命令mkdir

    mkdir  /home/ceshi   home目录下创建测试目录 mkdir  -p  /home/ceshi1/ceshi home目录下递归创建 mkdir     /home/ceshi2  ...

  2. SqlServer 查看最近执行过的语句

    查看系统中最近执行的语句 ST.text AS '执行的SQL语句', QS.execution_count AS '执行次数', QS.total_elapsed_time AS '耗时', QS. ...

  3. bootstrap-editable实现bootstrap-table行内编辑

    bootstrap-editable行内编辑效果如下: 需要引入插件 列初始化代码,为可编辑的列添加editable属性: columns = [ { title: '文件名', field: 'Na ...

  4. 学号20175212 《Java程序设计》第7周学习总结

    学号20175212 <Java程序设计>第7周学习总结 教材学习内容总结 8.1.String类 可以使用String类声明对象并创建对象,例如: String s = new Stri ...

  5. Kubernetes 入门之Kubernetes 的基本概念和术语

    Kubernetes是什么?    他是一个全新的基于容器技术分布式架构领先方案:    他也是一个开放的开发平台:    他也是一个完备的分布式系统支撑平台:   Kubernetes的基本慨念和术 ...

  6. windows下使用 fdfs_client 上传文件

    在上一篇中介绍了使用 FastDFS 与 Nginx 在 Linux 系统上实现分布式图片服务器,现在介绍在 windows 系统下使用该分布式图片服务器. 需要安装 fdfs_client 模块和配 ...

  7. caffe源码阅读

    参考网址:https://www.cnblogs.com/louyihang-loves-baiyan/p/5149628.html 1.caffe代码层次熟悉blob,layer,net,solve ...

  8. EXTENDED LIGHTS OUT

    In an extended version of the game Lights Out, is a puzzle with 5 rows of 6 buttons each (the actual ...

  9. [BZOJ1596]电话网络

    Problem 给你一棵树,可以在每个点上选择造塔或不造,每座塔可以覆盖这个节点和相邻节点,问覆盖整棵树的最小塔数. Solution 看到这道题的第一眼,我就觉得是一题贪心题,但看见出题的时候分类在 ...

  10. 七、Linux的权限命令

    1． 文件权限 r:对文件是指可读取内容 对目录是可以ls w:对文件是指可修改文件内容,对目录 是指可以在其中创建或删除子节点(目录或文件) x:对文件是指是否可以运行这个文件,对目录是指是否可以c ...