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

　　好了，言归正传，今天分享关于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删除/boot后该如何恢复

    一.其实不光boot目录被删除,也有系统启动不起来等,一直因为/boot这个目录的的问题,今天就来解决一下 Centos 6 1.进入救援,先修复vmlinz(内核) chroot /mnt/sysi ...

  2. Weblogic WLS-WebServices组件反序列化漏洞复现

    漏洞分析: 当weblogic使用WLS-WebServices组件时,该组件会调用XMLDecoder解析XML数据,由此就产生了该漏洞 影响版本: weblogic<10.3.6版本 复现过 ...

  3. orangepi one AP模式配置

    前两天买了一块orangepi one开发板,目的是做个局域网共享目录,具体共享协议用samba:这块板子有两个网卡,一个有线一个无线:有线主要用来ssh登陆调试,修改配置. 首先下载armbian的 ...

  4. (04) springboot 下的springMVC和jsp和mybatis

    1. springboot 和springmvc下的注解完全一样(新增了一些有用的) 常用的注解如下: @Controller @RestController= @Controller + @Resp ...

  5. import com.sun.org.apache.xerces.internal.impl.dv.util.Base64报错

       该类不属于JDK标准库范畴,但在JDK中包含了该类,可以直接使用.但是在eclipse中直接使用却找不到该类. 以下是解决方法步骤: Properties-->JavaBulid Path ...

  6. 小白的python之路10/30磁盘分区

    总结:fdisk   mkfs  mount 1.磁盘分区 硬盘分区有三种,主磁盘分区.扩展磁盘分区.逻辑分区. 一个硬盘主分区至少有1个,最多4个,扩展分区可以没有,最多1个.且主分区+扩展分区总共 ...

  7. Resources$NotFoundException资源文件没有找到

    错误类型: android.content.res.Resources$NotFoundException: String resource ID #0x1at android.content.res ...

  8. svn 删除svn项目命令

    svn delete svn://127.0.0.1:3690/project -m delete

  9. [NOIP2014D2]

    T1 Problem 洛谷 Solution 枚举那个点的位置,再O(n)扫一遍求出覆盖的公共场合的数量... 所以时间复杂度为O(128 * 128 * n) Code #include<cm ...

  10. 1.2 JAVA多线程实现

    线程和进程 进程:是执行中一段程序, 进程是系统进行资源分配和调度的一个独立单位. 线程:比进程更小的能独立运行的基本单位,单个进程中执行中每个任务就是一个线程.线程是进程中执行运算的最小单位. Th ...