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

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

案例一

<!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. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_类型的各种成员

    [Class中,可能包含的成员] 常量, 字段, 实例构造器, 类型构造器, 方法, 操作符重载, 转换操作符, 属性, 事件, 类型(Class)

  2. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_对象的相等性和同一性

    [重写Equals注意的事项] 1. Equals 必须是自反的:--x.Equals(x)肯定为 true 2. Equals 必须是对称的:--x.Equals(y)肯定返回与y.Equals(x ...

  3. P3802 小魔女帕琪

    传送门 考虑前面7个魔法 如果前面七个魔法各不相同,那么就能完成一次帕琪七重奏 设 A=a1*a2*...*a7,S=a1+a2+...+a7,B=S*(S-1)*...*(S-6) 对于不同的施法顺 ...

  4. R语言安装程序包

    自动安装(在线安装) 在R的控制台,输入 install.packages("gridExtra") # 安装 gridExtra install.packages("s ...

  5. ios中页面底部输入框，position:fixed元素的问题

    在安卓上点击页面底部的输入框,软键盘弹出,页面移动上移.ios上,软件盘弹出,输入框看不到了.让他弹出时让滚动条在最低部 var u = navigator.userAgent, app = navi ...

  6. 6-----selenuim和phantonJs处理网页动态加载数据的爬取

    动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding ...

  7. Sublime text中文乱码解决办法

    ConvertToUTF8 安装这个插件可以解决编码混乱问题 首先必须先配一下Sublime text ,安装 Package Control 1.  用Sublimt text 打开任意一个文件,C ...

  8. c++ 封装线程库 3

    1. 继承与重写run方法 我们封装了Thread类,并设置成员函数run()为纯虚函数,因此我们使用类继承,并重写run方法: class IncCount : public Thread//增加计 ...

  9. git知识点总结

    集中式版本控制系统,版本库是集中存放在中央服务器的,而干活的时候,用的都是自己的电脑,所以要先从中央服务器取得最新的版本,然后开始干活,干完活了,再把自己的活推送给中央服务器.集中式版本控制系统最大的 ...

  10. EOF是什么

    我学习C语言的时候,遇到的一个问题就是EOF. 它是end of file的缩写,表示"文字流"(stream)的结尾.这里的"文字流",可以是文件(file) ...