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

　　好了，言归正传，今天分享关于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. C# WPF开发之MVVM模式开发

    MVVM模式由Model,View,ViewModel三部分组成. Model需继承INotifyPropertyChange(属性修改通知) ViewModel负责业务逻辑,连接View和Model ...

  2. Codeforces Round #422 (Div. 2)E. Liar sa+st表+dp

    题意:给你两个串s,p,问你把s分开顺序不变,能不能用最多k段合成p. 题解:dp[i][j]表示s到了前i项,用了j段的最多能合成p的前缀是哪里,那么转移就是两种,\(dp[i+1][j]=dp[i ...

  3. maven中央仓库地址(支持db2,informix等)

    maven中央仓库地址(以下设置写在pom.xml文件里): <repositories> <repository> <id>nexus</id> &l ...

  4. 思科模拟器PacketTracer7--利用一台交换机和2台pc互连构成小型局域网

    实验二—2 实验工具:思科模拟器PacketTracer7(可在思科官网下载,免费) 实验设备: 交换机一台,PC两台,直连线或选择自动匹配 实验步骤: 一.配置网络拓扑图 连线可选择连通线或闪电符号 ...

  5. ubuntu 安装nginx, 出现 Unable to locate package

    今天在初始化一台新的ubuntu 服务器时,敲上了 sudo apt-get install nginx 来安装nginx, 却发现提示:  Reading package lists... Done ...

  6. fiddler安装及mock数据

    1,fiddler安装,解决无法抓到https问题 可用本机的火狐浏览器测试,不行,就fiddler生成证书,拷到火狐里 在firefox中,选项->进入配置界面:高级-> 证书 -> ...

  7. Response.End ,Response.Redirect、Server.Transfer 引发 “正在中止线程”异常的问题

    google后得知:Response.End 方法终止页的执行,并将此执行切换到应用程序的事件管线中的 Application_EndRequest 事件,同时抛出ThreadAbortExcepti ...

  8. SpringBoot项目中禁用HttpClient那些嘈杂的日志

    在SpringBoot中使用了HttpClient之后,会产生大量嘈杂且基本无效的日志信息,如下图: 找了很多文章,大部分用common-logging.propertites,log4j.prope ...

  9. dp背包问题

    0-1背包 1.问题定义: 给定n种物品和背包.物品i的重量是wi,价值是vi,每种物品只有一个,背包容量为C.问:应该如何选择装入背包的物品,使得装入背包中的物品总值最大. 2.算法思路: 选择装入 ...

  10. Spring Boot（一）

    (一)如何使用IDEA新建一个Spring Boot项目 https://www.cnblogs.com/wmyskxz/p/9010832.html