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

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

案例一

<!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. Experimental Educational Round: VolBIT Formulas Blitz N

    Description The Department of economic development of IT City created a model of city development ti ...

  2. 4.AOP

    1.代理模式 代理模式(Proxy Pattern)是GoF23种常用设计模式之一使用代理模式创建代理对象,让代理对象控制目标对象的访问,并且可以在不改变目标对象的情况下添加一些额外的功能包括静态代理 ...

  3. MVC中Cookies的简单读写操作

    写入 public static void WriteCookie(string cn, string cv, DateTime Time) { HttpCookie cookie = new Htt ...

  4. java不可见字符 trim

    trim()的作用去掉前后的空格,  但是解析excel,出现一个字符串trim之后还是有”空格“ 做了一下实验,原来一些不可见的字符不一定是“空格”, trim()也去不掉, 只能自己写方法了

  5. java线程类图

    Executors创建不同类型的Executor, executor执行不同的runnable task Executor: Runnable:

  6. Launch iCar Scan Android Scanner Support Bluetooth X431 iDiag Update Version

    Autonumen.com release new Launch iCar Scan for Android,Launch iCarScan Bluetooth Scanner is update v ...

  7. my30_表碎片整理

    确认表的类型与存储引擎,是否全部是innodb select TABLE_SCHEMA,TABLE_NAME,TABLE_TYPE,ENGINE,VERSION,ROW_FORMAT,TABLE_RO ...

  8. vue 中使用driver.js来进行页面分步引导

    Driver.js 推荐15款最佳的 jQuery 分步引导插件 11 个超棒的 jQuery 分步指引插件

  9. sqlt 之 分析 DB upgrade 导致SQL 性能下降 的方法 xplore

    https://blog.csdn.net/lukeUnique/article/details/79331779 https://mauro-pagano.com/2014/10/27/when-t ...

  10. Unity Scene Screen.resolutions 分辨率列表

    Screen.resolutions 分辨率列表(安卓平台试了不能用此方法,最好用宏定义判断一下平台) C# => public static Resolution[] resolutions; ...