作为一个初级的前端工程师,在开发的过程中遇到了许多问题,其中使元素垂直居中这个问题难住了我,可能在大家看来这是一个非常小的问题,但是却困扰了我很长时间,于是决定做一个总结!!!

废话不多说,直接上代码,里面有我的思考过程

案例一

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>div实现垂直居中</title>

</head>

<style>

.abc {

    width: 200px;

    height: 200px;

    background: green;

    position: absolute;

    left: ;

    top: ;

    bottom: ;

    right: ;

    margin: auto;

}

.box {

    position: relative;

    width: 500px;

    height: 500px;

    background: red;

    display: inline-block;

}

</style>

<div class="box">

    <div class="abc"> </div>

</div>

<body>

</body>

</html>

案例二(文字的水平垂直居中)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <style>

    div {

        height: 300px;

        width: 200px;

        display: table;

        background: #;

    }

    span {

        display: table-cell;

        vertical-align: middle;

    }

    </style>

    <div>

        <span>我是span</span>

    </div>

</body>

</html>

案例三

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>div实现垂直居中</title>

</head>

<style>

.abc {

    width: 200px;

    height: 200px;

    background: green;

    position: absolute;

    left: %;

    top: %;

    margin-left: -100px;

    margin-top: -100px;

}

.box {

    position: relative;

    width: 500px;

    height: 500px;

    background: red;

    display: inline-block;

}

</style>

<div class="box">

    <div class="abc"> </div>

</div>

<body>

</body>

</html>

案例四

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>div实现垂直居中</title>

</head>

<style>

/*

table-cell实现居中

将父盒子设置为table-cell元素，设置

text-align:center,vertical-align: middle;

子盒子设置为inline-block元素

*/

.ok {

    width: 200px;

    height: 200px;

    background: red;

    display: table-cell;

    /*这个必须是table-cell*/

    /*父级是一个小表格,表格默认是放文字的,子集是一个小果冻元素,给父级设置vertical-align:middle使元素垂直居中*/

    text-align: center;

    vertical-align: middle;

}

.innerBox {

    width: 100px;

    height: 100px;

    background: green;

    display: inline-block;

    /*注意:里面的元素必须是inline-block*/

}

</style>

<body>

    <div class="ok">

        <div class="innerBox">

        </div>

    </div>

</body>

</html>

案例五

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <style>

    /* 注意:该方法值适合文字的水平垂直居中;

     * 父级高度固定，嵌套行内元素

     *关键属性：父级:diaplay:tabel; 子集：display:tabel-cell; vertical-align:middle;

     */

    .div {

        height: 300px;

        width: 200px;

        display: table;

        /*这么理解:父级是一个固定宽度高度的大表格*/

        background: #;

    }

    .span {

        display: table-cell;

        /* 子集是父级表格里面的一个小格,设置display:table-cell,给父级设置垂直居中*/

        vertical-align: middle;

    }

    </style>

    <div class="div">

        <div class="span">sddddd</div>

    </div>

</body>

</html>

【css基础修炼之路】— 谈谈元素的垂直水平居中的更多相关文章

  1. 【CSS基础】实现 div 里的内容垂直水平居中

    方案一: 所有内容垂直水平居中 兼容性:IE8+. 条件:内容宽度和高度可以未知,可以是多行文字.图片.div. 描述:使用table-cell + vertical-align , html代码见文 ...

  2. HTML&CSS基础-内联和块元素

    HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  3. js实现未知宽高的元素在指定元素中垂直水平居中

    js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...

  4. css中各种情况下的元素的垂直和水平居中的问题

    问题:外边是一个容器,容器中还有一个容器,那么请问怎么让里边的容器垂直水平居中显示?? No1: 外边的容器宽度和高度确认,里边是行内元素 .container{width:200px; height ...

  5. CSS样式—— 字体、元素的垂直水平居中

    1.CSS样式与HTML中标签属性的区别: 标签的属性是采用 属性名=“属性值” 表示的 CSS样式是采用名值对 属性名:属性值: 表示的 2.内联元素(行内元素)与块元素 (1)内联元素及其特点: ...

  6. 探究css中各种情况下的元素的垂直和水平居中的问题(面试题)

    今天各种纠结,真的是不想写东西(ps 我比较懒)但是老是有人问这个问题,于是我就本着分享精神还是整理一下,好了废话不多说 开始上代码 问题:外边是一个容器,容器中还有一个容器,那么请问怎么让里边的容器 ...

  7. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  8. 【js基础修炼之路】- 手把手教你实现bind

    手写bind前我们先回顾一下bind有哪些特性,以便更好的理解bind和实现bind. bind的特性 var obj = { a: 100, say(one, two) { console.log( ...

  9. 【js基础修炼之路】- 微任务,宏任务和Event-Loop

    一段代码让你了解Event-Loop console.log(1); setTimeout(() => { console.log(2); }, 0); new Promise((resolve ...

随机推荐

  1. linux 中iscsi服务

      ###############第一步: 创建一个2G的分区第二步: yum install targetcli -y 第三步:创建一个2G的分区,并同步  第四步:  执行tagetclils查看 ...

  2. thinkPHP5.0分页传参

    分页函数paginate(),主要参数有:list_rows每页数量.page当前页.path URL路径.query URL额外参数.fragment URL锚点.type分页l类型 public ...

  3. Nuxt 2.3.X 配置babel

    1. 在package.json中修改运行脚本 添加--exec babel-node 添加之后的效果为:(修改了8/10行) { "name": "nuxt-learn ...

  4. Oracle基础篇--03DML语言

    1.数据准备: --创建表格的 create table dept as select * from scott.dept; create table emp as select * from sco ...

  5. MemoryFile匿名共享内存

    Android提供了一个高效的共享内存机制.如果应用中涉及到在多个进程间交换数据时使用Android提高的共享内存机制将会大大的提高效率.但是也许是出于安全考虑,在应用层使用共享内存机制将会遇到很多障 ...

  6. RTT之柿饼UI

    console.log("strings")//向单片机通过串口发送日志提示信息 this.setData({label1: { value : "Hello RT-Th ...

  7. CAD安装失败怎样卸载CAD 2013？错误提示某些产品无法安装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  8. webkit技术--网页渲染原理

    Webkit渲染 Webkit 是苹果发起的一个开源项目,后来谷歌用这个项目以 webkit 创建了一个新的项目 Chromium,我们平常用的 Chrome 浏览器一般都是基于 Chromium 开 ...

  9. [转] Java集合类详解

    集合类说明及区别Collection├List│├LinkedList│├ArrayList│└Vector│ └Stack└SetMap├Hashtable├HashMap└WeakHashMap ...

  10. 2019.3.26判断是否回文（java实现）

    我所有的文章都是对我总结学习的总结,那里不好或者冒犯了那里,我先对您说声对不起,请告知我进行改正. 今天java老师作业题目是判断是一个字符串否是回文: emmmm,我的思路是将字符串逆序,然后使用方 ...