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

　　好了，言归正传，今天分享关于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. 点击回到顶部（jQuery）

    写这个点击回到顶部.我采用的是最简单的jQuery,的点击事件  和animate特效. html部分 <div class="pulltop"> <img sr ...

  2. CF 552(div 3) E Two Teams 线段树，模拟链表

    题目链接:http://codeforces.com/contest/1154/problem/E 题意:两个人轮流取最大值与旁边k个数,问最后这所有的数分别被谁给取走了 分析:看这道题一点思路都没有 ...

  3. 解决JNI native 线程不能正常退出的问题

    本人刚涉足学习C++ 安卓  java,遇到这个棘手的问题,多谢博客园作者lknlfy 看了你的博客解决了这个问题,此文转发, 方便日后学习 以下内容转自lknlfy作者博客  传送门:http:// ...

  4. 移动端遇到的问题小结--video

    本篇主要是针对Android系统,所遇到的问题. 1. video的全屏处理: 这里说的全屏是指针对浏览器的全屏,而不是整个手机的全屏.要想全屏效果只需对video标签加   webkit-plays ...

  5. hbase-0.92.1表备份还原

    原表结构和数据 hbase(main):021:0* describe 'test' DESCRIPTION ENABLED {NAME => ', TTL = true > ', COM ...

  6. url路由配置以及渲染方式

    路由分配及模板渲染 路由系统 urlpatterns = [ path('admin/', admin.site.urls), path('teacher/',include('teacher.url ...

  7. oracle中“ORA-00060: 等待资源时检测到死锁” 或存储过程编译卡死 解决方法

    之前在调试存储过程时,出现卡死情况,无法插入数据 解决方法 1.查看那些表被锁住: --1.查看那些表被锁住--- select b.owner,b.object_name,a.session_id, ...

  8. jsp页面怎么引入js

    人老了,容易忘记事情,再此记录 这里需要注意的是js文件夹要直接放在WebRoot或者WebContent文件夹下面,不要放在WEB-INF下面.因为TomCat对WEB-INF这个文件夹下面的资源是 ...

  9. c语言判断闰年作业

    #include <stdio.h> int main() { int year,a; printf("请输人年份y:\n"); scanf("%d" ...

  10. log4j的详细配置

    https://www.cnblogs.com/juddhu/archive/2013/07/14/3189177.html(原文链接) 先说下我的需求 1,可以记录日记在我们的java开发项目周期中 ...