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

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

案例一

<!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. P3225 [HNOI2012]矿场搭建

    传送门 对于一个点双联通分量,如果它连接了两个或更多割点 那么不论哪个点GG都有至少一条路通到其他的点双联通分量,所以我们不用考虑 如果它只连接一个割点,如果这个割点GG,那整个块也一起GG,所以要再 ...

  2. 7.JSP简介

    ---恢复内容开始--- 1.JSP简介 Java动态网页技术标准(Java Server Pages)是基于Servlet技术以及整个Java体系的Web开发技术是用于动态生成HTML文档的Web页 ...

  3. Windows Server2008服务器可以远程桌面，但在内网中却Ping不通--解决方法

    Windows Server2008服务器可以通过远程桌面登录,但在内网中却Ping不通.所以要考虑的是防火墙是不是做了限制. 最简单粗暴的方法是直接把防火墙给关掉 还有个其他的方法是参考别人写的,我 ...

  4. java——volatile的可见性不能保证线程安全

    volatile: 1.保证变量对所有线程的可见性(但是由于java里面的运算并非原子操作,导致volatile变量的运算在并发下一样是不安全的) 用代码试过,确实是这样的,原因:有可能同时多个thr ...

  5. 实用的vue插件大汇总

    Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...

  6. Django开发常见问题

    1.Django设置中文,和时区.静态文件指向 #========================================================== # 设置时区 注意注释上面的:L ...

  7. 人工智能和机器学习 AI&ML howto

    我关心的AI.ML的分支领域: 我的博客:Deep Learning 和 Knowledge Graph howto (有关DL&KG的资料都在这里) https://www.cnblogs. ...

  8. mac U盘安装盘制作

    以下面的版本为例: Install_macOS_Sierra_10.12.6.dmg 解压到桌面,然后打命令 sudo /Users/love/Desktop/Install\ macOS\ Sier ...

  9. Murano Weekly Meeting 2016.05.31

    Meeting time: 2016.May.31 1:00~2:00 Chairperson:  Kirill Zaitsev, from Mirantis Meeting summary: 1.A ...

  10. (转)rsync数据备份方案

    rsync数据备份方案 原文:http://blog.51cto.com/irow10/1826458 最近整理了下公司的数据备份情况.以下是部分操作的过程 1.rsync数据备份,具体备份过程就不详 ...