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

　　好了，言归正传，今天分享关于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. JSON & XML

    什么是JSON? JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子 ...

  2. Vue 知识整理—02-起步

    一:Vue 语法格式: vue vm = new Vue({ //选项 }) 二:Vue 实例: <div id="app"> <p>{{message}} ...

  3. 崔庆才Python3网络爬虫开发实战电子版书籍分享

    资料下载地址: 链接:https://pan.baidu.com/s/1WV-_XHZvYIedsC1GJ1hOtw 提取码:4o94 <崔庆才Python3网络爬虫开发实战>高清中文版P ...

  4. 模仿WC.exe的功能实现--node.js

    Github项目地址:https://github.com/102derLinmenmin/myWc WC 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要 ...

  5. 笨办法学python 文本复制

    本来面目 from sys import argv from os.path import exists script, from_file, to_file = argv print(f" ...

  6. REST（Representational state transfer）的四个级别以及HATEOAS介绍

    Rest RES(Representational state transfer):表现层状态转移.其实它省略了主语,「表现层」其实指的是「资源」的「表现层」,所以通俗来讲就是:资源在网络中以某种表现 ...

  7. mysql 执行sql流程

    客户端发送sql 语句后的堆栈 #0 0x0000000100370565 in do_command(THD*) at percona-server-Percona-Server-5.6.37-82 ...

  8. js中的setTimeout和setinterval 用法说明

    setTimeout("countSecond()", 1000)://countSecond()是函数(方法) setTimeout 只执行一次函数,需要传递两个参数1是函数名, ...

  9. s6k0：一种输入法分词关联模型演示

    实现:用kotlin.但是考虑到习惯问题,需要借助akka实现erlang的actor,以及rx.java 需求:略 预计:最快两周 保守估计时间:2019年3月左右 优先级:低 加速方法:打饭钱 赞 ...

  10. jquery validate 校验时，如果有type=hiddien

    当校验时,不需要校验#warnId,否则会引起输入框#alarmtile里的样式混乱